element-ui响应式布局_element ui 响应式布局

参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。

<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

Layout布局采用基础的24栏

上述代码表示这一行有四列，当屏幕大小不同时，每一列的宽度相应调整

比如：

在屏幕为xs时，第一列宽度8，第二列宽度4，第三列宽度4，第四列宽度8

在对应的屏幕宽度下，这四列的宽度之和始终是24