bootstrap中列类型的区别

Question

我对 bootstrap 中的专栏感到非常困惑。我研究引导程序，但我无法识别列类型之间的差异。

 .col-md-4
 .col-xs-4
 .col-sm-4
 .col-lg-4
 .col-sm-offset-2

我明白这些数字的含义。我理解 12 列，但 md、xs 之间有什么不同......

我查了多个网站，但都不太理解。如果您能给我有关它的详细信息，我将很高兴。

Answer 1

这些不同的列类型用于使网站具有响应能力。所有响应屏幕尺寸大于1200px的 CSS都有前缀lg（大），屏幕尺寸范围从 992px 到 1199px都有前缀md（中），类似地 sm （小）适用于屏幕尺寸768px 到 991px。任何小于768 像素的内容均属于xs（超小）类别。现在如果你有这样的代码：

<div class="col-md-5 col-lg-4 col-sm-6 col-xs-12"></div>
<div class="col-md-5 col-lg-4 col-sm-6 col-xs-12"></div>
<div class="col-md-5 col-lg-4 col-sm-6 col-xs-12"></div>

在这种情况下，您将在大屏幕上看到 3 个 div，在中屏幕上看到 2 个 div，在小屏幕上看到 2 个 div，在超小屏幕上看到 1 个 div。每个列类型都在单独的媒体查询中定义。因此只有一种列类型会影响 div 的宽度。