Twitter bootstrap 3如何激活小设备上的navbar-collapse [英] Twitter bootstrap 3 how to activate navbar-collapse on small devices

问题描述

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

继承我的代码

  < nav class =navbar navbar-inverse navbar-default-toprole =navigationstyle =border：0px; background：＃F26522; align =center> 
 
< div class =col-lg-3 col-md-3 col-sm-12style =background-color：#fff; height：192px; align =center> 
 
< div class =hidden-xs hidden-sm>< / div>< a href =＃>< img src =logo_png.pngclass = 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 =buttonclass =navbar-toggle pull-left hidden-md hidden-lgdata-toggle =collapsedata-target =。navbar-ex1-collapse>< span class =sr-only>切换导航< / span> =icon-bar>< / span>< / span>< / 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-smalign =right > 
< / div> 
< / div> 
< / div> 
<！ -  /.navbar-collapse  - > 
 
<！ -  /.container  - > 
< / nav> 
  

解决方案

默认情况下，断点是 @ screen-sm-min （例如≥768像素）。

查看示例

自定义导航栏断点

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

=http://getbootstrap.com/components/#navbar>文档：

溢出内容

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

...

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

a href =http://getbootstrap.com/customize/> Bootstrap的自定义工具来构建Bootstrap的修改版本。从此处，您可以更改 @ grid-float-breakpoint 到由Bootstrap定义的另一个断点（即 xs ， sm ， md ， lg ）或设定金额（例如 500px ）。

完成后，导航至下载部分，然后点击编辑并下载

编辑 / p>

您的标记工作原理如下： http：/ /jsbin.com/kuxah/1/edit?html,output

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如何激活小设备上的navbar-collapse的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！