Advertisement

基于Element UI的响应式布局设计 基于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>
    
    
      
      

全部评论 (0)

还没有任何评论哟~