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

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

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

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

它由 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.