覆盖 Bootstrap 3 媒体查询

Posted 2023-03-06

【中文标题】覆盖 Bootstrap 3 媒体查询

【英文标题】：Overriding Bootstrap 3 Media Queries

【发布时间】：2014-05-09 23:29:02

【问题描述】：

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

例如，我有我的自定义样式表，我想将 min-width: 768px 的媒体查询覆盖为 min-width: 1200px。

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

更多说明：

bootstrap.css:

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

我的custom.css：

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

请帮帮我。

【问题讨论】：

当您使用@media (min-width: 1200px) 时，这只会覆盖宽度超过 1200 像素的设备的样式。

【参考方案1】：

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

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

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

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

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

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

【参考方案2】：

我建议将 Bootstrap 源代码中的以下 variables.less 覆盖为以下内容：

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

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

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

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

【参考方案3】：

如果我理解正确，您希望标题浮动在 1200 像素而不是 768 像素，对吗？ 所以你用这个：

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

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

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

希望我能正确理解您的问题！