ElementUI 组件Layout布局 el-row和el-col 简介

Layout布局

el-row属性简介

el-row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。
提醒： el-row :gutter需要与el-col :span 一起使用才能生效

el-col属性简介

el-col的span属性 默认值为24，表示每一行共24份，:spn的值即为每一列占据整行的比例

示例效果图

示例代码

    <el-row :gutter="10"><!-- 表示一行内的单个小列之间的间距为10px。相当于设置外边距 margin -->
      <el-col :span="8">
        <!--  el-col的span属性 默认值为24，   8/24 即此div显示宽度为1/3 -->
        <div class="grid-content bg-purple-dark"></div>
      </el-col>
      <el-col  :span="16">
        <!--      16/24 即此div显示宽度为2/3 -->
        <div class="grid-content bg-purple-dark"></div>
      </el-col>
    </el-row>
    

使用详情请参考：ElementUI 组件：Layout布局（el-row、el-col）