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

Question

我试图了解Bootstrap 3 的响应能力。我在css 中了解，如果您在一个元素上有 2 个类，那么第 2 个类将覆盖第一个类。但是，当您使用 Bootstrap 创建响应式设计时，您的元素将如下所示：

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

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

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. 如果您的屏幕宽度 >= 768 像素，则应用col-sm-1 规则。由于同一个元素具有两个类，col-sm-1 将覆盖 col-xs-1（最后写入的规则总是占上风）。
3. 如果您的屏幕宽度 >= 992 像素，则应用 col-md-6 规则，该规则将覆盖 col-sm-1。
4. 如果您的屏幕宽度 >= 1200 像素，则应用 col-md-11 规则，该规则将覆盖 col-md-6。

Answer 2

确实是 CSS 使用 CSS @media 查询（无 javascript）根据屏幕大小在这些类之间切换。

col-lg-11 不会“覆盖”其他的。 col-md-6 应用在中等宽度的屏幕上，col-sm-1 应用在小宽度的屏幕上，所以这样其他类会覆盖col-lg-11。