el-row 的span是啥
时间: 2024-04-26 13:15:56 浏览: 47
el-row 的 span 属性是用来决定 el-col 在横向占据 el-row 的几份空间,el-row 的横向距离被等量的分为 24 份,而 el-col 的 span 属性就是用来决定 el-col 在横向占据 el-row 的几份空间。比如,如果 el-col 的 span 分别是 8、5、8,那么剩下的 3 份空间就没有被使用,也就是右边的灰色部分,暴露出 el-row 的颜色。
相关问题
<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-row el-col
el-row和el-col是Vue.js中的两个重要组件,用于构建响应式的网格布局。el-row是网格系统的行组件,用于存放el-col,而el-col则是网格系统的列组件,用于设置网格元素的大小和位置。
在使用el-row和el-col之前,我们需要先导入Vue.js和ElementUI库。然后,我们可以在模板中使用el-row和el-col来构建响应式的网格布局。比如,我们可以这样嵌套使用el-row和el-col:
<template>
<el-row>
<el-col :span="8">Column 1</el-col>
<el-col :span="8">Column 2</el-col>
<el-col :span="8">Column 3</el-col>
</el-row>
</template>
在这个例子中,我们定义了一个包含3个等宽的列的el-row,每个列的宽度都是8个网格单位。这样,无论用户使用的是哪种设备,网格布局都会按照比例自适应调整。
除了设置列的宽度之外,我们还可以使用其他属性来控制网格布局的样式和表现,如offset、push和pull等。例如,在以下代码中,我们将第一个列向右偏移了2个网格单位:
<template>
<el-row>
<el-col :span="8" :offset="2">Column 1</el-col>
<el-col :span="8">Column 2</el-col>
<el-col :span="8">Column 3</el-col>
</el-row>
</template>
总而言之,el-row和el-col是Vue.js中非常有用的网格布局组件,它们可以用于快速构建响应式的网页布局,实现布局样式的灵活定义和自适应调整。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)