栅栏布局

148 阅读1分钟
  1. labelCol 和 wrapperCol
<a-row :gutter="16">
    <a-col :lg="12" :md="6" :sm="12" :sm="24">
        <a-form-item label="物料编号" :labelCol="{span: 8}" :wrapperCol="{span: 5, offset: 1}">
            <a-input v-model.trim="form.name"/>
        </a-form-item>
    </a-col>
</a-row>

gutter: 为 16的倍数
labelCol: 标签列
wrapperCol: 输入框的列
col: 总和为24
offset: 向右偏移的宽度
  1. 自适应
col-lg: 大屏设备(min-width: 1200px)
col-md: 中屏设备(min-width: 992px)
col-sm: 小屏设备(min-width: 768px)
col-xs: 超小屏设备(min-width: 768px)