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

Layout布局

el-row属性简介

el-row 组件 提供 gutter 属性来指定每一栏之间的间隔,默认间隔为 0。
提醒: el-row :gutter需要与el-col :span 一起使用才能生效
ElementUI 组件Layout布局 el-row和el-col 简介_第1张图片

el-col属性简介

el-col的span属性 默认值为24,表示每一行共24份,:spn的值即为每一列占据整行的比例
ElementUI 组件Layout布局 el-row和el-col 简介_第2张图片

示例效果图

在这里插入图片描述

示例代码

    <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)

你可能感兴趣的:(前端,elementui,前端,javascript,vue.js)