element ui el-col中间添加间距
时间: 2023-10-12 19:55:47 浏览: 398
在 Element UI 中,el-col 是一个用于布局的组件,它默认是没有间距的。如果你想在 el-col 中间添加间距,你可以使用 CSS 来实现。
一种常见的方法是使用 flex 布局,并通过在 el-row 中的列之间添加 margin 来创建间距。例如:
```html
<el-row>
<el-col :span="8">
<!-- 第一个列 -->
</el-col>
<el-col :span="8" class="column-with-margin">
<!-- 第二个列 -->
</el-col>
<el-col :span="8">
<!-- 第三个列 -->
</el-col>
</el-row>
```
然后,在你的样式表中添加以下 CSS:
```css
.column-with-margin {
margin-left: 10px;
margin-right: 10px;
}
```
这样,第二个列就会有左右各 10px 的间距。
另外,你也可以使用内嵌样式来直接在 el-col 中添加间距。例如:
```html
<el-row>
<el-col :span="8">
<!-- 第一个列 -->
</el-col>
<el-col :span="8" style="margin-left: 10px; margin-right: 10px;">
<!-- 第二个列 -->
</el-col>
<el-col :span="8">
<!-- 第三个列 -->
</el-col>
</el-row>
```
这样,第二个列同样会有左右各 10px 的间距。
希望能对你有所帮助!如果还有其他问题,请随时提问。