创新互联小程序教程：微信小程序扩展组件·row/col 组件

row/col 组件

按照栅格化布局思路，再加上响应式布局的特性，提供了 row/col 两个基础布局组件，用来帮助开发者快速适配多屏应用。

我们拥有十余年网页设计和网站建设经验，从网站策划到网站制作，我们的网页设计师为您提供的解决方案。为企业提供网站建设、网站设计、微信开发、微信小程序定制开发、成都手机网站制作、html5、等业务。无论您有什么样的网站设计或者设计方案要求，我们都将富于创造性的提供专业设计服务并满足您的需求。

核心概念是将整个屏幕宽度分为 24 单位，每个单位的大小，由当前屏幕尺寸决定的。例如 375px 的屏幕宽度，那么 1 unit = 375/24 px.

npm i @miniprogram-component-plus/col --save
npm i @miniprogram-component-plus/row --save

{
  "usingComponents": {
    "mp-col": "@miniprogram-component-plus/col",
    "mp-row": "@miniprogram-component-plus/row"
  }
}

三列均分布局

默认无

属性	类型	默认值	必填	说明
span	number	24	否	当前 col 所占屏幕宽度的份数
offset	number	0	否	距 row 左侧偏移margin 距离
push	number	0	否	距左侧偏移的单位距离
pull	number	0	否	距右侧偏移的单位距离
xs	`number, Object`		否	当屏幕 `< 768px` 时，对应显示的网格规则。例如 `xs="2" 或 xs="{ "span": 24, "offset": 0 }"`
sm	`number, Object`		否	当屏幕 `>= 768px, <992px`，对应显示的网格规则。
md	`number, Object`		否	当屏幕 `>= 992px, <1200px`，对应显示的网格规则。
lg	`number, Object`		否	当屏幕 `>= 1200px, <1920px` 时，对应显示的网格规则。
xl	`number, Object`		否	当屏幕 `>= 1920px` 时，对应显示的网格规则。

提示：

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容