m-row 栅格行

简述

栅格布局系统，和 m-col 配合使用，总共 24 栅格。

注意

请以 uni_modules/m-unix 与本文为准；各端差异以 uni-app 与各平台官方文档为准。涉及隐私能力（相册、定位、剪贴板、手机号等）需在 manifest 与后台完成配置。

平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

演示地址

与线上 H5 演示基座 分包一致（文档站右下角预览 iframe 亦指向同一路径）。

类型	地址
分包路径	pages_demo/extensions/extensions
线上 H5（hash）	打开演示

基本使用

<template>
	<m-row :gutter="20">
		<m-col :span="12">
			<view>
				<text> 一半宽度 </text>
			</view>
		</m-col>
		<m-col :span="12">
			<view>
				<text> 一半宽度 </text>
			</view>
		</m-col>
	</m-row>
</template>

Props

参数	说明	类型	默认值
gutter	栅格间距，单位 rpx	number	0

插槽

名称	说明
default	列内容

示例

间隔 20rpx

<m-row :gutter="20">
	<m-col :span="12"><view>左</view></m-col>
	<m-col :span="12"><view>右</view></m-col>
</m-row>

无间隔

<m-row>
	<m-col :span="12"><view>左</view></m-col>
	<m-col :span="12"><view>右</view></m-col>
</m-row>