css - 覆盖 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;
  }
}

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

要覆盖默认的 Bootstrap 规则，请使用类似的东西:

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

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