el-row el-col一行六个
时间: 2023-11-08 07:50:09 浏览: 188
el-row el-col 是 Element UI 框架中的组件,用于创建网格布局。el-row 用于创建行,el-col 用于创建列。默认情况下,一行中可以放置多个 el-col 组件来实现多列布局。如果你希望一行中只显示六个 el-col 组件,可以设置每个 el-col 组件的 span 属性为 4(因为一行默认被分为了24个格子,24除以6等于4),如下所示:
```html
<el-row>
<el-col :span="4">1</el-col>
<el-col :span="4">2</el-col>
<el-col :span="4">3</el-col>
<el-col :span="4">4</el-col>
<el-col :span="4">5</el-col>
<el-col :span="4">6</el-col>
</el-row>
```
这样每个 el-col 组件都会占据一行中的 4 个格子,总共六个组件就会占据整个一行的宽度。你可以根据自己的需求进行调整 span 的值。
相关问题
<el-row> <el-col :span="12"> </el-col> <el-col :span="12"> </el-col> </el-row>怎么再将el-col分成1:2的两部分
你可以在每个 `el-col` 中再嵌套一个 `el-row`,然后在其中分别再添加两个 `el-col`,并设置它们的 `span` 属性为6和12,代码如下:
```
<el-row>
<el-col :span="12">
<el-row>
<el-col :span="6"></el-col>
<el-col :span="6"></el-col>
</el-row>
</el-col>
<el-col :span="12">
<el-row>
<el-col :span="6"></el-col>
<el-col :span="6"></el-col>
</el-row>
</el-col>
</el-row>
```
这样,每个 `el-col` 就被分成了两个宽度比例为1:2的部分。
<el-form label-position="left"> <el-row> <el-col :span="4"> <el-form-item label="姓名"> <el-input></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="年龄"> <el-input></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="性别"> <el-radio-group> <el-radio label="male">男</el-radio> <el-radio label="female">女</el-radio> </el-radio-group> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="地址"> <el-input></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="邮箱"> <el-input></el-input> </el-form-item> </el-col> </el-row> </el-form> 如何使表单的标签显示在左侧
可以通过设置 `label-position` 属性为 "left" 来使表单的标签显示在左侧,具体代码如下:
```html
<el-form label-position="left">
<!-- 表单内容 -->
</el-form>
```
这样表单中每个表单项的标签都会显示在左侧。
阅读全文