Question

我使用bootstrap 3.0并在移动网站上工作。我试图弄清楚如何在观看平板电脑设备（小/ SM设备）上显示和激活导航栏切换，因为导航栏折叠仅适用于超小型设备。使用bootstrap 2时没有问题

继承我的代码

<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>

Answer 1

默认情况下，断点为@screen-sm-min（即≥768px）。

View an Example

自定义导航栏断点

要自定义导航栏断点，请更改变量较小的@grid-float-breakpoint。

来自documentation：

溢出内容

由于Bootstrap不知道导航栏中的内容需要多少空间，因此您可能会遇到内容包装到第二行的问题。要解决此问题，您可以：

...

c。更改导航栏在折叠模式和水平模式之间切换的点。自定义 @ grid-float-breakpoint 变量或添加您自己的媒体查询。

您可以使用Bootstrap's customization tool构建Bootstrap的修改版本。从here开始，您可以将@grid-float-breakpoint更改为Bootstrap定义的另一个断点（即xs，sm，md，lg）或者设定金额（即500px）。

完成后，导航至Download部分，然后点击Compile and Download

修改

您的标记也按预期工作：http://jsbin.com/kuxah/1/edit?html,output

Answer 2

这里是时髦人士的解决方案

@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;
}

Answer 3

为什么要在使用媒体查询覆盖网格时打破网格，例如在sass中

.navbar-toggle{  
    @media(max-width:$screen-sm-max) {
    display: block !important;
  }
}

Twitter bootstrap 3如何激活小型设备上的navbar-collapse

3 个答案:

自定义导航栏断点

溢出内容