Bootstrap 如何从一个类切换到另一个类? [英] How does Bootstrap switch from one class to the next?

问题描述

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

I am trying to understand Bootstrap 3's responsiveness. I understand in css if you have 2 classes on an element, then the 2nd class will override the first class. But, when you create a responsive design with Bootstrap, your element will look something like this:

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

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

Is it the css that switches between these classes depending on the size of the screen? Or does the javascript manage this? From my understanding, the attributes in col-lg-11 would always overwrite the other 2 classes, but obviously my understanding is incomplete.

推荐答案

由 CSS 管理.

CSS 规则是按特定顺序编写的，正是这个顺序使 Bootstrap 成为移动优先".您将按照正确的顺序申请:

The CSS rules are written in a specific order, and it's this order which make Bootstrap "mobile first". You'll apply, in the right order :

• 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.

1. You'll first have col-xs-1 rules applied.
2. If your screen has a width >= 768px, then you apply col-sm-1 rules. As the same element have both classes, col-sm-1 will override col-xs-1 (the last rule written always gain the upper hand).
3. If your screen has a width >= 992px, then you apply col-md-6 rules, which will override col-sm-1.
4. If your screen has a width >= 1200px, then you apply col-md-11 rules, which will override col-md-6.

这篇关于Bootstrap 如何从一个类切换到另一个类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！