html - Bootstrap Navbar 折叠点 < 768px

Question

这是 Bootstrap 3 的老问题 -> 更改导航栏的折叠点，但此处建议的方法:

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

这里:

Bootstrap 3 Navbar Collapse

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

有没有 CSS 解决方案？如果没有，有人可以指出我需要更改和下载的 Bootstrap 自定义页面中的正确属性吗？也许是通用断点？因为我看不到 Navbar 断点:

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

Answer 1

是的，将断点更改为小于 768px 的值与 changing the breakpoint over 768px 不同。您需要覆盖所有通常会使其崩溃的 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