CSS 在 Bootstrap 3.0 中更改折叠断点

Change Collapse breakpoint in Bootstrap 3.0

提问by WiZ.Prince

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!

请帮助我更改导航栏何时折叠或是否有任何方法可以使其响应，例如变小！

that's my code:

那是我的代码：

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

回答by Christina

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:

有很多事情可以更改 css 中的折叠断点，您需要对移动优先响应式设计非常好的处理才能做到这一点或使用 LESS，但最快的方法是访问：

http://getbootstrap.com/customize/

http://getbootstrap.com/customize/

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.

并在@grid-float-breakpoint 字段中输入您想要的断点。选项是列出的媒体查询断点@screen-sm-min 是它的默认位置，它曾经在 2.x 中的 @screen-md-min（或附近）处默认。

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.

另请阅读文档并使用示例作为起点。导航栏的所有实现都没有包含在列类中，因为它们在 .rows 中使用，并且应该直接在导航栏中有 .container 。

回答by Shina

For those who might need it, this is what I did.

对于那些可能需要它的人，这就是我所做的。

@media only screen and (min-width: 500px) {
    .collapse {
        display: block;
    }

    .navbar-header {
        display: none;
    }
}

@media only screen and (max-width: 500px) {
     .collapse {
        display: none;
     }

     .navbar-header {
        display: block;
     }
}

So what I did was to hide the toggle mobile button and still display my menu on that specific width and vice-versa when the width is less than 500px.

所以我所做的是隐藏切换移动按钮，并在特定宽度上仍然显示我的菜单，反之亦然，当宽度小于 500px 时。

回答by Christopher Craig

If your using Less go to the variables. Less file and change the following variable from:

如果您使用 Less 转到变量。减少文件并更改以下变量：

//** Point at which the navbar becomes uncollapsed.

//** 导航栏未折叠的点。

@grid-float-breakpoint:     @screen-sm-min;

to:

到：

@grid-float-breakpoint:     @screen-md;

That would make the collapsing nav work on portrait tablet size down.

这将使折叠导航在纵向平板电脑尺寸上工作。

回答by WebTim

For those looking in SASS,

对于那些在 SASS 中寻找的人，

Just ensure you have the override of the "$grid-float-breakpoint" before your bootstrap import.

只需确保在引导程序导入之前覆盖了“$grid-float-breakpoint”。

$grid-float-breakpoint: 992px;

Is How I changed mine.

是我如何改变我的。

回答by WebTim

The collapse can prove troublesome if you have a wide menu bar. You need to edit the media queries inside the bootstrap.css file. This can be found

如果您有一个宽菜单栏，折叠可能会很麻烦。您需要编辑 bootstrap.css 文件中的媒体查询。这个可以找到

@media (min-width: XXpx) {
  .navbar-header {
    float: left;
  }
}

You should change this and some other under this such as .collapse to perfect it's responsiveness to your website. Also, your HTML is fine, but this doesn't really affect it.

您应该更改此内容和其他内容，例如 .collapse 以完善它对您网站的响应能力。此外，您的 HTML 很好，但这并没有真正影响它。

回答by steampowered

Some answers to this question claim you can override the bootstrap CSS changes without transpiling the LESSinto CSS(using Gruntor some other transpiler). The diff below shows the changes which you would need to make manually in order to simply change @grid-float-breakpointfrom @screen-sm-min(the default) to @screen-lg-min.

这个问题的一些答案声称您可以覆盖引导 CSS 更改，而无需将LESS转换为CSS（使用Grunt或其他一些转译器）。下面的差异显示了您需要手动进行的更改，以便简单地@grid-float-breakpoint从@screen-sm-min（默认）更改为@screen-lg-min.

There are too many changes to do manually - all these CSS changes for one variable! Better just transpile the LESS using Grunt and do it right.

手动更改太多 - 所有这些 CSS 更改都针对一个变量！最好使用 Grunt 转译 LESS 并正确执行。

Or use the twitter service to generate a file if you don't want to set up Grunt: http://getbootstrap.com/customize/

或者如果不想设置 Grunt 也可以使用 twitter 服务生成文件：http: //getbootstrap.com/customize/

diff --git a/node_modules/bootstrap/dist/css/bootstrap.css b/node_modules/bootstrap/dist/css/bootstrap.css
index 66bf005..09bdb1c 100644
--- a/node_modules/bootstrap/dist/css/bootstrap.css
+++ b/node_modules/bootstrap/dist/css/bootstrap.css
@@ -1886,7 +1886,7 @@ dd
 {
     margin-left: 0;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .dl-horizontal dt
     {
@@ -4816,7 +4816,7 @@ tbody.collapse.in

     margin-bottom: 2px;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-right .dropdown-menu
     {
@@ -5516,14 +5516,14 @@ select[multiple].input-group-sm > .input-group-btn > .btn

     border: 1px solid transparent;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar
     {
         border-radius: 4px;
     }
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-header
     {
@@ -5547,7 +5547,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
 {
     overflow-y: auto;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-collapse
     {
@@ -5598,7 +5598,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
     margin-right: -15px;
     margin-left: -15px;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .container > .navbar-header,
     .container-fluid > .navbar-header,
@@ -5615,7 +5615,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn

     border-width: 0 0 1px;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-static-top
     {
@@ -5630,7 +5630,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
     right: 0;
     left: 0;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-fixed-top,
     .navbar-fixed-bottom
@@ -5671,7 +5671,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
 {
     display: block;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar > .container .navbar-brand,
     .navbar > .container-fluid .navbar-brand
@@ -5712,7 +5712,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
 {
     margin-top: 4px;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-toggle
     {
@@ -5730,7 +5730,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
     padding-top: 10px;
     padding-bottom: 10px;
 }
-@media (max-width: 767px)
+@media (max-width: 1199px)
 {
     .navbar-nav .open .dropdown-menu
     {
@@ -5761,7 +5761,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
         background-image: none;
     }
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-nav
     {
@@ -5863,7 +5863,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
         top: 0;
     }
 }
-@media (max-width: 767px)
+@media (max-width: 1199px)
 {
     .navbar-form .form-group
     {
@@ -5874,7 +5874,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
         margin-bottom: 0;
     }
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-form
     {
@@ -5925,7 +5925,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
     margin-top: 15px;
     margin-bottom: 15px;
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-text
     {
@@ -5935,7 +5935,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
         margin-left: 15px;
     }
 }
-@media (min-width: 768px)
+@media (min-width: 1200px)
 {
     .navbar-left
     {
@@ -6020,7 +6020,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
     color: #555;
     background-color: #e7e7e7;
 }
-@media (max-width: 767px)
+@media (max-width: 1199px)
 {
     .navbar-default .navbar-nav .open .dropdown-menu > li > a
     {
@@ -6139,7 +6139,7 @@ fieldset[disabled] .navbar-default .btn-link:focus
     color: #fff;
     background-color: #080808;
 }
-@media (max-width: 767px)
+@media (max-width: 1199px)
 {
     .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header
     {