CSS Twitter bootstrap 3 如何在小型设备上激活导航栏折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23347701/
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
Twitter bootstrap 3 how to activate navbar-collapse on small devices
提问by user3582382
I'm using bootstrap 3.0 and working on a mobile site. I'm trying to figure out how to show and activate navbar-toggle on viewing tablet devices (Small / SM Device) because the navbar-collapse only works at Extra small devices . There is no problem while using bootstrap 2
我正在使用引导程序 3.0 并在移动站点上工作。我试图弄清楚如何在查看平板电脑设备（小型/SM 设备）上显示和激活导航栏切换，因为导航栏折叠仅适用于超小型设备。使用bootstrap 2时没有问题
heres my code
继承人我的代码
<nav class="navbar navbar-inverse navbar-default-top" role="navigation" style="border:0px; background:#F26522;" align="center">
<div class="col-lg-3 col-md-3 col-sm-12" style="background-color:#fff; height:192px;" align="center" >
<div class="hidden-xs hidden-sm"></div><a href="#"><img src="logo_png.png" class="img-responsive" ></a></td>
</div>
<div class="col-lg-9 col-md-9 col-sm-12"">
<div class="row">
<div class="col-lg-11 col-md-11 col-sm-12">
<button type="button" class="navbar-toggle pull-left hidden-md hidden-lg" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only ">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-left navr">
<li class="navrli"><a href="#" id="nav-0">ABOUT</a> </li>
</ul>
</div>
</div>
<div class="col-lg-1 col-md-1 hidden-sm" align="right">
</div>
</div>
</div>
<!-- /.navbar-collapse -->
<!-- /.container -->
</nav>
采纳答案by Carrie Kendall
By default, the breakpoint is @screen-sm-min(ie ≥768px).
默认情况下，断点是@screen-sm-min（即≥768px）。
Customize the navbar breakpoint
自定义导航栏断点
To customize the navbar breakpoint, change the less variable @grid-float-breakpoint.
要自定义导航栏断点，请更改 less 变量@grid-float-breakpoint。
From the documentation:
从文档：
Overflowing content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
...
c.Change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpointvariable or add your own media query.
内容泛滥
由于 Bootstrap 不知道导航栏中的内容需要多少空间，因此您可能会遇到内容包装到第二行的问题。要解决此问题，您可以：
...
C。更改导航栏在折叠和水平模式之间切换的点。自定义@grid-float-breakpoint变量或添加您自己的媒体查询。
You can use Bootstrap's customization toolto build a modified version of Bootstrap. From here, you can alter @grid-float-breakpointto another breakpoint defined by Bootstrap (ie, xs, sm, md, lg) or a set amount (ie 500px).
您可以使用Bootstrap 的自定义工具来构建Bootstrap 的修改版本。从这里，你可以改变@grid-float-breakpoint通过引导定义的另一个断点（即xs，sm，md，lg）或一组量（即500px）。
When you're finished, navigate to the Downloadsection, and click Compile and Download
完成后，导航到“下载”部分，然后单击Compile and Download
Edit
编辑
Your markup works as expected, as well: http://jsbin.com/kuxah/1/edit?html,output
您的标记也按预期工作：http: //jsbin.com/kuxah/1/edit?html,output
回答by Vipul
here is the solution for sassy people
这是时髦人的解决方案
@media(max-width:$screen-sm-max) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
回答by Pavlina Jane
why to break a grid when you simply override it with media queries, e.g in sass
为什么在你简单地用媒体查询覆盖它时打破一个网格，例如在 sass 中
.navbar-toggle{
@media(max-width:$screen-sm-max) {
display: block !important;
}
}
