Bootstrap 导航栏折叠点 < 768px

这是 Bootstrap 3 的一个老问题 -> 更改导航栏的折叠点，但这里建议的方法是：

https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint

和这里：

Bootstrap 3 导航栏折叠 https://stackoverflow.com/questions/18192082/bootstrap-3-navbar-collapse

不适用于下面的折叠768px，它似乎只适用于延伸塌陷点，而不是缩回它。我有一个特殊的情况，我的导航栏有 3 个按钮，所以它不需要这么早折叠。我希望它在 420px 处折叠。

有CSS解决方案吗？如果没有，有人可以指出我需要更改和下载的引导自定义页面中的正确属性吗？也许是通用断点？因为我看不到任何内容显示导航栏断点：

http://getbootstrap.com/customize/ http://getbootstrap.com/customize/

根据要求，我的导航栏 HTML 很简单：

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <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="navbar-collapse collapse" id = "navbar">
            <ul class="nav navbar-nav navbar-left">
                <li class = "navbar_buttons"><a id = "new_route_button"><strong>New Route</strong></a></li>
                <li class="divider-vertical"></li>
                <li class = "navbar_buttons"><a id = "clear_route_button">Clear Route</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">    <!--Right justified navbar list-->
                <li class = "navbar_buttons"><a id = "about_button">About</a></li>
            </ul>
        </div>

    </div>  <!-- Container -->

</nav>  <!-- End of Navbar Container -->

然后我有一些 CSS 来添加垂直划分：

/*Preventing vertical dividers from appearing collapsed*/
@media (max-width: 420px) {
.navbar-collapse .nav > .divider-vertical {
    display: none;
  }
}

/*Defining the vertical dividers*/
.navbar .divider-vertical {
  height: 50px;
  margin: 0 9px;
  border-right: 1px solid #ffffff;
  border-left: 1px solid #DADADA;
}

.navbar-inverse .divider-vertical {
  border-right-color: #222222;
  border-left-color: #111111;
}

是的，将断点更改为任何内容小于 768 像素不同于改变断点超过768px https://stackoverflow.com/a/36289507/171456。您需要覆盖通常会导致崩溃的所有 Bootstrap 默认值。

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

    .navbar-header {
        float: left;
    }

    .navbar-toggle {
        display: none;
    }

    .navbar-nav.navbar-left {
       float: left;
       margin: 0;
    }

    .navbar-nav.navbar-right {
       float: right;
       margin: 0;
    }
    .navbar-nav>li {
        float: left;
    }
    .navbar-nav>li>a {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

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

     .navbar-header {
        display: block;
     }
}

http://www.bootply.com/wpUuFIZqJ2 http://www.bootply.com/wpUuFIZqJ2