elementui el-row 里面的栅格不在同一行

Question

#elementui el-row 里面的栅格不在同一行
#

每行24分栏布局

示例1
示例1

Answer 1

qq_39064436 晚上好🌙🌙🌙
本答案参考通义千问

问题描述： 在使用Element UI的el-row组件进行栅格布局时，你可能会遇到不同栅格单元没有在同一行显示的问题。这可能是因为栅格的大小设置、自动换行或者其他CSS样式影响了元素的布局。

解决方案：

1. 栅格大小设置： 确保每个栅格的大小（col-后跟数字，例如col-6表示6个栅格）是正确的。如果某个栅格的大小超过了el-row的总宽度（默认12个栅格），则会自动换行到下一行。

   <el-row :gutter="20">
     <el-col :span="6" v-for="(item, index) in items" :key="index">{{ item }}</el-col>
   </el-row>
   

2. 设置最大列数： 如果你希望栅格始终在同一行显示，可以设置max-cols属性，限制每行的最大列数。

   <el-row :gutter="20" :max-cols="3">
     <el-col :span="6" v-for="(item, index) in items" :key="index">{{ item }}</el-col>
   </el-row>
   

3. 清除浮动： 如果元素有浮动或者设置了overflow: auto导致的，可以尝试清除浮动：

   .el-row {
     display: flex;
     flex-wrap: wrap;
     /* 清除浮动 */
     &:after {
       content: "";
       display: block;
       clear: both;
     }
   }
   

4. 检查CSS冲突： 验证是否有其他CSS规则覆盖了el-row或el-col的样式，比如float、display等，这可能导致元素位置不正确。

5. 检查响应式布局： 如果是响应式设计，确保在不同屏幕尺寸下，栅格布局能够正确调整。

通过以上步骤排查，应该能解决el-row中栅格不在同一行的问题。