我正在尝试了解 Bootstrap 3
的响应能力。我在 css
中了解到,如果您在一个元素上有 2 个类,那么第二个类将覆盖第一个类。但是,当您使用 Bootstrap
创建响应式设计时,您的元素将如下所示:
<div class="col-sm-1 col-md-6 col-lg-11"></div>
是 css
根据屏幕大小在这些类之间切换吗?还是 javascript
管理这个?根据我的理解,col-lg-11
中的属性总是会覆盖其他 2 个类,但显然我的理解是不完整的。
最佳答案
它由 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 {}
...
}
- 您首先会得到
col-xs-1
应用的规则。 - 如果您的屏幕宽度 >= 768px,那么您应用
col-sm-1
规则。由于同一个元素有两个类,col-sm-1
将覆盖col-xs-1
(最后写的规则总是占上风)。 - 如果您的屏幕宽度 >= 992px,那么您应用
col-md-6
规则,这将覆盖col-sm-1
. - 如果您的屏幕宽度 >= 1200 像素,那么您应用
col-md-11
规则,这将覆盖col-md-6
.
关于css - Bootstrap 如何从一个类切换到另一个类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20424803/