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

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

自定义导航栏断点

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

来自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.

您可以使用 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