在Bootstrap 3.0中更改折叠断点

Question

请帮我改变导航条折叠的时间，或者是否有任何方法可以让它像小尺寸一样响应！

这是我的代码：

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

Answer 1

有很多东西要改变css中的崩溃断点，你需要一个非常好的处理移动第一响应设计来做它或使用LESS，但最快的方法是访问：

http://getbootstrap.com/customize/

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

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

Answer 2

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

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

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

Answer 3

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

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

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

为：

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

这会使折叠导航功能在纵向平板电脑上缩小。

Answer 4

对于那些在SASS看来的人，

确保覆盖＆＃34; $ grid-float-breakpoint＆＃34;在引导程序导入之前。

$grid-float-breakpoint: 992px;

我是如何改变我的。

Answer 5

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

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

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

Answer 6

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

手动更改太多 - 所有这些CSS都会针对一个变量进行更改！最好只使用Grunt来传递LESS并正确行事。

如果您不想设置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
     {