<i-col :xs="2" :sm="4" :md="6" :lg="7">
时间: 2024-04-22 07:20:04 浏览: 21
<i-col>是Element UI中的一个组件,用于创建栅格布局。它可以将页面分为24等分的栅格,方便进行响应式布局。通过设置不同的属性,可以实现在不同屏幕尺寸下的布局效果。
以下是<i-col>的一些常用属性:
1. :span:指定当前列所占的栅格数,可以是1-24之间的整数。
2. :offset:指定当前列的左侧偏移的栅格数,可以是1-24之间的整数。
3. :push:指定当前列向右移动的栅格数,可以是1-24之间的整数。
4. :pull:指定当前列向左移动的栅格数,可以是1-24之间的整数。
5. :xs、:sm、:md、:lg、:xl:指定在不同屏幕尺寸下的布局效果,可以设置为1-24之间的整数。
使用<i-col>可以方便地创建响应式布局,使页面在不同设备上都能有良好的显示效果。
相关问题
<a-col :md="5" :sm="8"> 的sm
根据引用和引用的信息,根据Bootstrap 4.3版本,没有.col-xs-这个类名了。在Bootstrap 4中,.col-xs-* 类被替换为 .col-*。所以,你可以将代码<a-col :md="5" :sm="8">中的:sm修改为:col,就是<a-col :md="5" :col="8">。这样在手机模式下就能正常工作了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [Bootstrap4中Grid栅格系统CSS中 col-sm- col-md- col-lg- 的意义](https://blog.csdn.net/weixin_40688217/article/details/96726509)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [flexiblegs-scss-plus:柔性网格系统Scss Plus](https://download.csdn.net/download/weixin_42122986/15727296)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
<el-col :lg="13" :md="13" :sm="24" :xl="13" :xs="24">
根据提供的引用内容,`<el-col>` 是 Element UI 中的列组件,用于布局。其中的 `:lg`、`:md`、`:sm`、`:xl`、`:xs` 是用来设置不同屏幕尺寸下的列宽度的属性。
例如,`<el-col :lg="13" :md="13" :sm="24" :xl="13" :xs="24">` 表示在不同屏幕尺寸下,该列的宽度分别为:
- 在大屏幕(lg)下,宽度为 13 格(占据整个行的 13/24);
- 在中等屏幕(md)下,宽度为 13 格(占据整个行的 13/24);
- 在小屏幕(sm)下,宽度为 24 格(占据整个行的 24/24,即占据整行);
- 在超大屏幕(xl)下,宽度为 13 格(占据整个行的 13/24);
- 在超小屏幕(xs)下,宽度为 24 格(占据整个行的 24/24,即占据整行)。
这样设置可以实现响应式布局,根据不同屏幕尺寸自动调整列的宽度。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)