bootstrap中col-xs-*和col-sm-* 和col-md-*是怎么样对应的

Posted 2023-05-08

bootstrap中 <div class="col-sm-10 col-md-8"> 表示：在中等屏幕设备上该div占用8列的宽度；在小屏幕上该div占用10列的宽度。为什么这个div里和col-md-8对应的是col-sm-10而不是col-sm-12或col-sm-15或其他？

参考技术A 栅格系统
中的列是通过指定1到12的值来表示其跨越的范围
所以不会有col-**-15
最大也就是12
<div
class="col-sm-10
col-md-8">
这个应该是说：
屏幕大于(≥992px)
，使用col-md-*
而不是col-sm-*
如果屏幕大于(≥768px)，小雨<=992px，使用col-sm-*
而不是col-md-*
如果还不懂的话，可以自己试一下：
谷歌浏览器
或火狐浏览器都有“查看元素”的功能，你试着缩放窗口，看看你那个div对应的css是不是变了就知道了

bootstrap -- 一个标签中，同时有 col-xs , col-sm , col-md , col-lg

.col-xs- 超小屏幕 手机 (<768px)

.col-sm- 小屏幕 平板 (≥768px)

.col-md- 中等屏幕 桌面显示器 (≥992px)

.col-lg- 大屏幕 大桌面显示器 (≥1200px)

 

HTML代码：

<div class="col-xs-12 col-sm-9 col-md-6 col-lg-3">
                        
</div>

当屏幕尺寸

小于 768px 的时候，用 col-xs-12 类对应的样式；

在 768px 到 992px 之间的时候，用 col-sm-9 类对应的样式；

在 992px 到 1200px 之间的时候，用 col-md-6 类对应的样式；

大于 1200px 的时候，用 col-lg-3 类对应的样式；