twitter-bootstrap 覆盖 Bootstrap 3 媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22747791/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overriding Bootstrap 3 Media Queries
提问by Quentin Gérard
How do you override a media query on Bootstrap 3?
如何覆盖 Bootstrap 3 上的媒体查询？
For example, I have my custom style sheet and I want to override a media query that is min-width: 768px to a min-width: 1200px.
例如，我有我的自定义样式表，我想将 min-width: 768px 的媒体查询覆盖为 min-width: 1200px。
Every time I do that it doesn't apply the settings. However if I change that media query on Bootstrap's own css file, then it works!
每次我这样做时，它都不会应用设置。但是，如果我在 Bootstrap 自己的 css 文件上更改该媒体查询，那么它就可以工作了！
For more clarification:
如需更多说明：
bootstrap.css:
bootstrap.css：
@media (min-width: 768px) {
.navbar-header {
float: left;
}
}
My custom.css:
我的custom.css：
@media (min-width: 1200px) {
.navbar-header {
float: left;
}
}
Please help me out.
请帮帮我。
采纳答案by javaBean007
When you use bootstrap css, they have it defined as:
当您使用 bootstrap css 时，他们将其定义为：
@media (min-width: 768px) {
.navbar-header {
float: left;
}
}
So it will alwaysapply that css rule when it is above or at that width of 768, even if you apply your rule of media 1200 after the fact. This is because you are never overriding the previous rule you are just adding a new breakpoint.
因此，即使您事后应用媒体 1200 的规则，它也将始终在高于或等于 768 的宽度时应用该 css 规则。这是因为您永远不会覆盖之前的规则，您只是添加了一个新断点。
To override default bootstrap rule use something like:
要覆盖默认引导程序规则，请使用以下内容：
@media (min-width: 768px) {
.navbar-header {
float: none;
}
}
In your own custom.css file, (Of course make sure to include your custom.css file after bootstrap.css to make custom load last).
在您自己的 custom.css 文件中，（当然确保在 bootstrap.css 之后包含您的 custom.css 文件以使自定义加载最后）。
回答by D. Starr
I would recommend overriding the following variables.lessin Bootstrap source to something like this:
我建议将Bootstrap 源中的以下variables.less覆盖为如下所示：
@grid-float-breakpoint: @screen-lg;
If you are writing your styles in LESS already, include your own custom.lessfile after the vanilla bootstrap.lessthen when you compile, the variables defined later will take precedence.
如果您已经在 LESS 中编写样式，请custom.less在 vanillabootstrap.less之后包含您自己的文件，然后在编译时，稍后定义的变量将优先。
Or, copy the @importstatements from bootstrap.lessdirectly into your own custom.less, update the paths for your environment, (ie. @import: "../node_modules/bootstrap/less/normalize.less";) comment out the modules you don't need, then compile your own... For even leaner CSS output!
或者，将bootstrap.less 中的@import语句直接复制到您自己的，更新您的环境的路径，（即）注释掉您不需要的模块，然后编译您自己的...甚至更精简的 CSS 输出！custom.less@import: "../node_modules/bootstrap/less/normalize.less";
回答by René Roth
If I understand you correctly you want the header to float at 1200px and not at 768px, right? So you use this:
如果我理解正确，您希望标题浮动在 1200 像素而不是 768 像素，对吗？所以你使用这个：
@media (min-width: 768px) {
.navbar-header {
float: initial;
}
}
to render the setting for 768px ineffective and then just define it for 1200px
使 768px 的设置无效，然后将其定义为 1200px
@media (min-width: 1200px) {
.navbar-header {
float: left;
}
}
I hope I understood your question right!
我希望我理解你的问题！
