防止菜单在 768px 显示 CSS 媒体查询中折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10094479/
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
Prevent menu from collapsing in 768px display CSS media query
提问by esafwan
I am trying to do a site using twitter bootstrap. I am having relatively less menus, so it kind of fits within the 768px display also. But in bootstrap by default, the menu collapses using media queries. I am not able to prevent this behavior.
我正在尝试使用 twitter bootstrap 做一个网站。我的菜单相对较少，所以它也适合 768px 显示。但默认情况下，在引导程序中，菜单会使用媒体查询折叠。我无法阻止这种行为。
This is my html
这是我的 html
<div class="row">
<div class="span3 logo"><h1><img src="img/logo.png" /></h1></div>
<div class="span9">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav nav-pills">
<li><a href="#">Home</a> </li>
<li><a href="#">Services</a> </li>
<li><a href="#">Portfolio</a> </li>
<li><a href="#">Contact Us</a> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
I know it has something to do with the media query in bootstrap, but not able to understand.
我知道它与引导程序中的媒体查询有关，但无法理解。
采纳答案by Galaxy
You'll want to read up the section: Using the media queriesat the bootstrap site: http://getbootstrap.com/2.3.2/scaffolding.html#responsive(Bootstrap 2.3.2) http://getbootstrap.com/getting-started/#disable-responsive(Bootstrap 3)
您需要阅读以下部分：在引导站点使用媒体查询：http: //getbootstrap.com/2.3.2/scaffolding.html#responsive(Bootstrap 2.3.2) http://getbootstrap.com/入门/#disable-responsive(Bootstrap 3)
You'll want to use the relevant media queries to override the styles bootstrap adds when your viewport shrinks.
当您的视口缩小时，您将需要使用相关的媒体查询来覆盖引导程序添加的样式。
// Landscape phones and down
@media (max-width: 480px) { ... }
// Landscape phone to portrait tablet
@media (max-width: 768px) { ... }
// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 980px) { ... }
// Large desktop
@media (min-width: 1200px) { .. }
If you don't want the navbar to collapse, remove the 'collapse' from the class name. You should probably get rid of:
如果您不希望导航栏折叠，请从类名中删除“折叠”。你可能应该摆脱：
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
In short, have a look over the docs, there's a section covering this exact thing titled 'Optional responsive variation' here: http://getbootstrap.com/2.3.2/components.html#navbar(Bootstrap 2.3.2)
简而言之，查看文档，这里有一个部分涵盖了这个名为“可选响应变体”的确切内容：http: //getbootstrap.com/2.3.2/components.html#navbar（Bootstrap 2.3.2）
回答by pine3ree
You can customize Twitter Bootstrap css compilingit from sass-twitter-bootstrap scss files and setting $navbarCollapseWidthin _variables.scssto your desired value...
您可以自定义Twitter的引导CSS编译从萨斯- Twitter的引导SCSS文件，并设置它$navbarCollapseWidth在_variables.scss您需要的值...
Edit
编辑
As @Accipheran stated in the comments, for Bootstrap 3.x the name of the variable you should set is $grid-float-breakpoint.
正如@Accipheran 在评论中所述，对于 Bootstrap 3.x，您应该设置的变量名称是$grid-float-breakpoint.
回答by Matt Hymanson
This worked well for me:
这对我来说效果很好：
.nav-collapse, .nav-collapse.collapse {
overflow: visible;
}
.navbar .btn-navbar {
display: none;
}
回答by neves
Reading the answers, I believe you are talking about Bootstrap version 2. Maybe someone looking for an answer for Bootstrap 3 will arrive here. This answer is for you!
阅读答案，我相信您在谈论 Bootstrap 版本 2。也许有人会为 Bootstrap 3 寻找答案。这个答案是给你的！
- Go to Bootstrap customization page
- redefine the @grid-float-breakpoint value for something hardcoded (e.g. 520px) or for a smaller screen size like @screen-xs-min
- Press the button at the bottom of the page to recompile the css files
- substitute your bootstrap.css and bootstrap-min.css files with the ones from the downloaded zip file.
- 转到Bootstrap 自定义页面
- 为硬编码（例如 520px）或较小的屏幕尺寸（如 @screen-xs-min）重新定义 @grid-float-breakpoint 值
- 按页面底部的按钮重新编译css文件
- 用下载的 zip 文件中的文件替换 bootstrap.css 和 bootstrap-min.css 文件。
回答by Andreas Ek
find variable:
查找变量：
@grid-float-breakpoint
@grid-float-breakpoint
which is set to @screen-sm, you can change it according to your needs.
设置为@screen-sm，您可以根据需要更改它。
If you override the vendor less file, set the variable to 0px, eg:
如果您覆盖供应商较少文件，请将变量设置为 0px，例如：
@grid-float-breakpoint: 0px;
@grid-float-breakpoint: 0px;
回答by Fred K
If you want to completely disable the collapsing navbar, add this variable in your custom LESS file:
如果要完全禁用折叠导航栏，请在自定义 LESS 文件中添加此变量：
@grid-float-breakpoint: 0px;
回答by Ross Hambrick
If all you want to do is not have the nav collapse until it reaches a smaller value, the simplest way is to head over to the Twitter Bootstrap customization page, change the @navbarCollapseWidthto the value you want, and download the package. Done.
如果您只想让导航在达到较小值之前不折叠，最简单的方法是转到Twitter Bootstrap 自定义页面，将 更改为@navbarCollapseWidth您想要的值，然后下载包。完毕。
If you want to customize beyond what this page allows, you'll have to override or customize as described in the other answers.
如果您想自定义超出此页面允许的范围，则必须按照其他答案中的描述进行覆盖或自定义。
回答by Alastair
This example is from the official website: http://getbootstrap.com/examples/non-responsive/
这个例子来自官网：http: //getbootstrap.com/examples/non-responsive/
The changes are in non-responsive.cssbut the important parts pertaining to .navbarare:
更改在non-responsive.css 中，但重要的部分.navbar是：
body {
padding-top: 70px;
padding-bottom: 30px;
}
.page-header {
margin-bottom: 30px;
}
.page-header .lead {
margin-bottom: 10px;
}
.navbar-collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav > li {
float: left;
}
回答by Michael Cole
Here's what I used for bootstrap 3.3.4. It's a hack, but it's also not a 2-day fix redoing the css.
这是我用于引导程序 3.3.4 的内容。这是一个 hack，但它也不是重做 css 的 2 天修复。
@media (min-width: 768px) and (max-width: 979px) {
.navbar-header {
width: 100% !important;
}
.navbar-toggle {
display: inline-block !important;
float: right !important;
}
}
You may need to tweak the selectors, but basically, make the header full-width, then show and float the button right.
您可能需要调整选择器，但基本上，使标题全宽，然后显示并向右浮动按钮。
