- 首页
- 前端开发
- Twitter bootstrap 3 如何在小型设备上激活导航栏折叠
Twitter bootstrap 3 如何在小型设备上激活导航栏折叠
[英] Twitter bootstrap 3 how to activate navbar-collapse on small devices
本文介绍了Twitter bootstrap 3 如何在小型设备上激活导航栏折叠的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 bootstrap 3.0 并在一个移动网站上工作.我试图弄清楚如何在查看平板电脑设备(小型/SM 设备)上显示和激活导航栏切换，因为导航栏折叠仅适用于超小型设备.使用bootstrap 2时没有问题
这是我的代码
<nav class="navbar navbar-inverse navbar-default-top" role="navigation" style="border:0px; background:#F26522;"对齐=中心"><div class="col-lg-3 col-md-3 col-sm-12" style="background-color:#fff; height:192px;"对齐=中心"><div class="hidden-xs hidden-sm"></div><a href="#"><img src="logo_png.png" class="img-responsive" ><<;/a></td>
<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 ">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><div class="collapse navbar-collapse navbar-ex1-collapse"><ul class="nav navbar-nav navbar-left navr"><li class="navrli"><a href="#" id="nav-0">关于</a>
<div class="col-lg-1 col-md-1 hidden-sm" align="right">
<!--/.navbar-collapse --><!--/.container --></nav>
解决方案
默认断点是@screen-sm-min(即≥768px).
查看示例
自定义导航栏断点
要自定义导航栏断点，请更改 less 变量 @grid-float-breakpoint.
来自文档:
<块引用>内容泛滥
由于 Bootstrap 不知道导航栏中的内容需要多少空间，因此您可能会遇到内容包装到第二行的问题.要解决此问题，您可以:
...
c. 更改导航栏在折叠和水平模式之间切换的点.自定义 @grid-float-breakpoint 变量或添加您自己的媒体查询.
您可以使用Bootstrap 的自定义工具 来构建 Bootstrap 的修改版本.从 这里，您可以将 @grid-float-breakpoint 更改为另一个由 Bootstrap 定义的断点(即 xs、sm、md、lg)或设定数量(即500px).
完成后，导航至下载部分，然后点击编译下载
编辑
您的标记也按预期工作:http://jsbin.com/kuxah/1/edit?html,输出
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
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 default, the breakpoint is @screen-sm-min (ie ≥768px).
View an Example
Customize the navbar breakpoint
To customize the navbar breakpoint, change the less variable @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-breakpoint variable or add your own media query.
You can use Bootstrap's customization tool to build a modified version of Bootstrap. From here, you can alter @grid-float-breakpoint to another breakpoint defined by Bootstrap (ie, xs, sm, md, lg) or a set amount (ie 500px).
When you're finished, navigate to the Download section, and click Compile and Download
Edit
Your markup works as expected, as well: http://jsbin.com/kuxah/1/edit?html,output
这篇关于Twitter bootstrap 3 如何在小型设备上激活导航栏折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
