在Bootstrap 3.0中更改折叠断点 [英] Change Collapse breakpoint in Bootstrap 3.0

问题描述

请帮助我更改导航栏折叠时，或如果有任何方法，使其响应，像小尺寸！

Please help me on changing when my nav-bar be collapsed or if there is any method to make it responsive like getting in small size!

这是我的代码：

    <div style="background-color:#e2e2e2; padding-bottom:10px;">
    </div>

    <div class="container">
        <div class="col-lg-10 col-lg-push-1 onhover">
            <nav class="navbar-default custom-nav" role="navigation">   
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="nav-collapse1" style="padding:0px;">                    
                    <ul class="nav nav-pills onhover">
                        <li class="active"><a class="onhover1" href="#">Home</a></li>
                        <li><a class="onhover1" href="#">Rooms</a></li>
                        <li><a class="onhover1" href="#">Events</a></li>
                        <li><a class="onhover1" href="#">Restraunts</a></li>
                        <li><a class="onhover1" href="#">Gallery</a></li>
                        <li><a class="onhover1" href="#">Services</a></li>
                        <li><a class="onhover1" href="#">About</a></li>
                        <li><a class="onhover1" href="#">Contact</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>

推荐答案

css，你需要一个非常好的处理在移动第一响应设计做它或使用LESS，但最快的方式是访问：

There are numerous things to change the collapse breakpoint in the css, you would need a VERY good handle on mobile first responsive design to do it OR use the LESS, but the fastest way is to visit:

http://getbootstrap.com/customize/

在@ grid-float-breakpoint字段中输入所需的断点。选项是媒体查询断点列表@ screen-sm-min是默认值，它用于默认在2.x中的@ screen-md-min（或那里）。

And enter the breakpoint that you want in the @grid-float-breakpoint field. The choices are the Media queries breakpoints listed @screen-sm-min is where it defaults, it used to default at the @screen-md-min (or thereabouts) in 2.x.

还要阅读文档并使用示例作为起点。没有一个导航栏的实现包含在列类中，因为在.rows中使用，并且应该在navbar中直接使用.container。

Also read the docs and use the examples as starting points. None of the implementations of the navbar are contained in column classes as those are used inside .rows and there's supposed to be .container directly inside the navbar.

这篇关于在Bootstrap 3.0中更改折叠断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！