How does Bootstrap switch from one class to the next?

问题

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>

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.

回答1:

It's managed by CSS.

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

Example for <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. 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.

回答2:

It is indeed the CSS that switches between these classes depending on the size of the screen using CSS @media queries (no javascript).

The col-lg-11 does not "override" the others. The col-md-6 is applied on medium width screens, and the col-sm-1 is applied on small width screens, so in this way the other classes override the col-lg-11.

来源：https://stackoverflow.com/questions/20424803/how-does-bootstrap-switch-from-one-class-to-the-next