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。这是因为您永远不会覆盖之前的规则，只是添加了一个新的断点。

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

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

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

Answer 2

如果我理解正确你想让标题浮动在1200px而不是768px，对吗？所以你用这个：

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

使768px的设置无效，然后将其定义为1200px

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

我希望我理解你的问题！

Answer 3

我建议在Bootstrap源代码中覆盖以下variables.less，如下所示：

@grid-float-breakpoint: @screen-lg;

如果您已经在LESS中编写样式，请在vanilla custom.less之后包含您自己的bootstrap.less文件，然后在编译时，稍后定义的变量将优先。

或者，将@import语句从bootstrap.less直接复制到您自己的custom.less，更新您的环境路径（即@import: "../node_modules/bootstrap/less/normalize.less";）注释掉您的模块不需要，然后编译自己的...为更精简的CSS输出！

我使用Node，Grunt grunt-contrib-less来自动执行这些任务。

覆盖Bootstrap 3媒体查询

3 个答案: