el-row el-col一行六个
时间: 2023-11-08 19:50:09 浏览: 64
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反而让el-col一行行布局了
在Element UI中,el-row是一个行容器,el-col是一个列容器。当el-row中嵌套多个el-col时,el-col会自动均分el-row的宽度,因此看起来像是每个el-col都占据了一行。如果你希望el-col按照你指定的宽度进行布局,可以给每个el-col设置不同的span属性,例如:
```
<el-row>
<el-col :span="8">第一个col</el-col>
<el-col :span="8">第二个col</el-col>
<el-col :span="8">第三个col</el-col>
</el-row>
```
这个示例中,每个el-col的宽度都是3分之1,因为它们的span属性都设置为8。您可以根据需要更改span属性的值。
el-row el-col 设置一排两个
如果你想在一行中设置两个 `el-col` 元素,可以使用 `:span` 属性来控制它们的宽度,例如:
```html
<template>
<el-row>
<el-col :span="12">col1</el-col>
<el-col :span="12">col2</el-col>
</el-row>
</template>
```
在上述示例中,两个 `el-col` 元素都设置了 `:span="12"`,表示它们各占一行中的一半,因此会并排显示。
你也可以使用 `:xs`、`:sm`、`:md`、`:lg`、`:xl` 属性来设置在不同屏幕尺寸下的宽度,例如:
```html
<template>
<el-row>
<el-col :xs="24" :md="12">col1</el-col>
<el-col :xs="24" :md="12">col2</el-col>
</el-row>
</template>
```
在上述示例中,`col1` 和 `col2` 在小屏幕(xs)下都占据整个宽度,在中等屏幕(md)下则各占一行中的一半,因此会并排显示。