twitter-bootstrap 早些时候折叠 Bootstrap 响应式导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18507262/
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
Collapsing Bootstrap Responsive Navbar Earlier
提问by KreaTief
Hello I'm using a responsive navbar with bootstrap in my blogger blog. My problem is, that it is piling up very ugly beore the point is reached where it does collapse.
您好，我在我的博主博客中使用带有引导程序的响应式导航栏。我的问题是，在到达它确实崩溃的点之前，它正在堆积非常丑陋。
I tried to overwrite the media query, but now the result I get is a constantly triggered navbar, which covers up my blog and the trigger button is nowhere to be seen.
我试图覆盖媒体查询，但现在我得到的结果是一个不断触发的导航栏，它覆盖了我的博客并且无处可见触发按钮。
That's what I wrote. Any idea how I can get it to work?
那是我写的。知道如何让它工作吗？
@media screen (max-width: 1200px){
.nav-collapse {
clear: both;
}
.nav-collapse .nav {
float: none;
margin: 0 0 10px;
}
.nav-collapse .nav > li {
float: none;
}
.nav-collapse .nav > li > a {
margin-bottom: 2px;
}
.nav-collapse .nav > .divider-vertical {
display: none;
}
.nav-collapse.in .btn-group {
padding: 0;
margin-top: 5px;
}
.nav-collapse .dropdown-menu {
position: static;
top: auto;
left: auto;
display: none;
float: none;
max-width: none;
padding: 0;
margin: 0 15px;
background-color: transparent;
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.nav-collapse .open > .dropdown-menu {
display: block;
}
.nav-collapse .nav > li > .dropdown-menu:before,
.nav-collapse .nav > li > .dropdown-menu:after {
display: none;
}
.nav-collapse .navbar-form,
.nav-collapse .navbar-search {
float: none;
padding: 10px 15px;
margin: 10px 0;
}
.navbar .nav-collapse .nav.pull-right {
float: none;
margin-left: 0;
}
.nav-collapse,
.nav-collapse.collapse {
height: 0;
overflow: hidden;
}
.navbar .btn-navbar {
display: block;
}
}
My Navbar HTML:
我的导航栏 HTML：
<div class='navbar navbar-fixed-top navbar-inverse'>
<div class='container'>
<button class='navbar-toggle pull-left' data-target='.navbar-responsive-collapse' data-toggle='collapse' style='z-index: 25; border:0;' type='button'>
<span class='icon-bar'/>
<span class='icon-bar'/>
<span class='icon-bar'/>
</button>
<div class='nav-collapse collapse navbar-responsive-collapse'>
<ul class='nav navbar-nav'>
<li><a href='http://bekreatief.blogspot.com'><i class='icon-home'>  </i>Home</a></li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'><i class='icon-info-sign'> </i> About <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='http://bekreatief.blogspot.com/p/kreatief.html'><i class='icon-exclamation'> </i>KreaTief</a></li>
<li><a href='http://bekreatief.blogspot.com/2013/05/faq.html'><i class='icon-question'> </i>F.A.Q.</a></li>
</ul>
</li>
<li><a href='http://bekreatief.blogspot.com/p/archiv_7.html'><i class='icon-archive'> </i>Archive</a></li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'><i class='icon-edit'> </i>Tutoriallists <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='http://bekreatief.blogspot.ch/p/code.html'><i class='icon-code'> </i>Code</a></li>
<li><a href='http://bekreatief.blogspot.ch/p/picture.html'><i class='icon-picture'> </i>Picture</a></li>
<li><a href='http://bekreatief.blogspot.com/p/food.html'><i class='icon-food'> </i>Food</a></li>
<li><a href='http://bekreatief.blogspot.ch/p/diy_28.html'><i class='icon-puzzle-piece'> </i>DIY</a></li>
<li><a href='http://bekreatief.blogspot.com/p/other.html'><i class='icon-folder-open'> </i>Other</a></li>
<li class='divider'/>
<li class='dropdown-header'>Tutorials By Level</li>
<li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4?max-results=10'>✤</a></li>
<li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4%E2%9C%A4?max-results=10'>✤✤</a></li>
<li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4%E2%9C%A4%E2%9C%A4?max-results=10'>✤✤✤</a></li>
<li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4%E2%9C%A4%E2%9C%A4%E2%9C%A4?max-results=10'>✤✤✤✤</a></li>
<li><a href='http://bekreatief.blogspot.com/search/label/%E2%9C%A4%E2%9C%A4%E2%9C%A4%E2%9C%A4%E2%9C%A4?max-results=10'>✤✤✤✤✤</a></li>
</ul>
</li>
<li><a href='http://bekreatief.blogspot.com/p/contact_23.html'><i class='icon-comments'> </i>Contact</a></li>
<li><a href='http://kreatiefdesigns.blogspot.ch/'><i class='icon-cog'> </i>KreaTief designs</a></li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'><i class='icon-eye-open'> </i>Follow <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='http://bekreatief.blogspot.ch/feeds/posts/default'><i class='icon-rss-sign'> </i>RSS</a></li>
<li><a href='http://www.bloglovin.com/en/blog/3645972'><i class='icon-plus-sign'> </i>Bloglovin'</a></li>
<li><a href='http://blog-connect.com/a?id=1589905134039127183'><i class='icon-anchor'> </i>Blogconnect</a></li>
</ul>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'><i class='icon-paper-clip'> </i>Find Me <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='http://bloggerlooks.blogspot.ch/'><i class='icon-external-link'> </i>Blogger Goodies 4 U</a></li>
<li><a href='http://mynimi94.deviantart.com/'><i class='icon-external-link'> </i>DeviantArt</a></li>
<li><a href='http://pinterest.com/mkreatief/'><i class='icon-external-link'> </i>Pinterest</a></li>
<li><a href='http://bp.cplove.de/mitglieder/myri/'><i class='icon-external-link'> </i>Blogosphera</a></li>
<li><a href='http://www.hierschreibenwir.de/user/12356/'><i class='icon-external-link'> </i>HSW</a></li>
<li><a href='http://myriamfrisano.blogspot.ch/'><i class='icon-external-link'> </i>Wortgef?ngnisarchitektur</a></li>
</ul>
</li>
</ul>
<!-- Search Field -->
<div class='pull-right navbar-search'>
<form action='http://www.google.co.uk/cse' id='cse-search-box'>
<input name='cx' type='hidden' value='014092313708849156193:r0xlcl-xk10'/>
<input name='cof' type='hidden' value='UTF-8'/>
<input class='form-control search-query span3' id='q' name='q' placeholder='Search' type='text'/>
<i class='icon-search'/>
</form>
</div><!-- /search container -->
</div> <!-- /.nav-collapse -->
</div> <!-- /.container -->
回答by David Hewitt
You could go to the Bootstrap customization pageand change the variable for the width that the navbar collapses at @navbarCollapseWidth
您可以转到Bootstrap 自定义页面并更改导航栏折叠宽度的变量@navbarCollapseWidth
This is a screenshot of its location on the Bootstrap 2.3.2 page, but you can do a similar thing with Bootstrap 3.0 as well. They just name it differently.
这是 Bootstrap 2.3.2 页面上其位置的屏幕截图，但您也可以使用 Bootstrap 3.0 执行类似的操作。他们只是命名不同。
You do that and hit the download button at the bottom, and use that bootstrap.css file instead of the default one and everything should be good.
你这样做并点击底部的下载按钮，然后使用 bootstrap.css 文件而不是默认文件，一切都应该很好。
