Bootstrap如何从一个类切换到另一个类？

Question

我想了解Bootstrap 3的回应。我理解在css如果你有一个元素的2个类，那么第二个类将覆盖第一个类。但是，当您使用Bootstrap创建响应式设计时，您的元素将如下所示：

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

是否css根据屏幕大小在这些类之间切换？或者javascript管理这个吗？根据我的理解，col-lg-11中的属性总是会覆盖其他两个类，但显然我的理解是不完整的。

Answer 1

由CSS管理。

CSS规则是按特定顺序编写的，而这正是使Bootstrap“移动优先”的顺序。您将按正确的顺序申请：

• col-xs-n
• col-sm-n
• col-md-n
• col-lg-n

<div class="col-xs-1 col-sm-1 col-md-6 col-lg-11"></div>的示例：

...
.col-xs-1 {}
...
@media (min-width: 768px) {
  ...
  .col-sm-1 {}
  ...
}
@media (min-width: 992px) {
  ...
  .col-md-6 {}
  ...
}
@media (min-width: 1200px) {
  ...
  .col-lg-11 {}
  ...
}

1. 您首先应用col-xs-1规则。
2. 如果您的屏幕宽度> = 768px，则应用col-sm-1规则。由于同一元素同时具有两个类，col-sm-1将覆盖col-xs-1（最后编写的规则总是占上风）。
3. 如果您的屏幕宽度> = 992px，则应用col-md-6规则，这将覆盖col-sm-1。
4. 如果您的屏幕宽度> = 1200px，则应用col-md-11规则，这将覆盖col-md-6。

Answer 2

确实是CSS在这些类之间切换，具体取决于使用CSS @media查询（没有javascript）的屏幕大小。

col-lg-11不会“覆盖”其他人。 col-md-6应用于中宽屏幕，col-sm-1应用于小宽度屏幕，因此其他类会覆盖col-lg-11。