Question

据我所知，如果我定义一个分辨率较低的bootstrap 3列（例如col-sm-6），则较高分辨率的值与该列（6）的值相同。

但较低的分辨率怎么样？假设我有一个定义为＆＃34; col-lg-6＆＃34;的列，那么分辨率较低的设备会发生什么？它们具有相同的值或采取一些默认值？

Answer 1

从xs（超小）到lg（大）的引导列，例如 col-xs-1 到 col-lg-12 采用CSS样式

position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;

在你的例子中：如果您使用css类 col-lg-6 定义了一个元素例如，<div class="col-lg-6">

下的造型

@media (min-width: 1200px)
.col-lg-6 {
   width: 50%;
}

其中的css不会低于1200px的媒体屏幕尺寸

另一个例子..

假设您添加了一个元素：

<div class="col-sm-6 col-md-6 col-lg-6"></div>

注意添加了3个css类。

默认情况下，您的div标记现在采用上面提到的那种风格。

但是当屏幕尺寸发生变化时，它们会做出响应/反应。

Bootstrap使用媒体查询

@media (min-width: 768px) // for sm(small) columns.

这意味着当设备大小为768px及以上时，类 col-sm - 的元素会覆盖或添加css 如，

.col-sm-6 {
   width: 50%;
   background:red; //this is just an example.
}

，但..

Bootstrap再次在md（中）

上声明媒体查询

@media (min-width: 992px)

.col-md-6 {
   width: 50%;
   background:blue: //this is just an example.
}

当设备屏幕大小更改为992px

时，它基本上会忽略column-sm的css background:red并将其覆盖background:blue

依此类推。

您可以在此link中查看引导程序的CSS，也可以访问documentation以了解有关其网格系统的更多信息。