覆盖Bootstrap 3媒体查询

Question

如何覆盖Bootstrap 3上的媒体查询？

例如,我有我的自定义样式表,我想覆盖最小宽度:768px到最小宽度:1200px的媒体查询.

每次我这样做都不会应用设置.但是,如果我在Bootstrap自己的css文件上更改了该媒体查询,那么它可以工作!

有关更多说明:

bootstrap.css:

@media (min-width: 768px) {
  .navbar-header {
    float: left;
  }
}

我的custom.css:

@media (min-width: 1200px) {
 .navbar-header {
 float: left;
 }
}

请帮帮我.

Answer 1

当您使用 bootstrap css 时，他们将其定义为：

@media (min-width: 768px) {
  .navbar-header {
    float: left;
  }
}

因此，即使您事后应用媒体 1200 的规则，它也将始终在高于或等于 768 的宽度时应用该 css 规则。这是因为您永远不会覆盖之前的规则，您只是添加了一个新断点。

要覆盖默认引导规则，请使用以下内容：

@media (min-width: 768px) {
  .navbar-header {
    float: none;
  }
}

在您自己的 custom.css 文件中，（当然确保在 bootstrap.css 之后包含您的 custom.css 文件以使自定义加载最后）。