Bootstrap Navbar折叠点<768px

Question

这是Bootstrap 3的旧问题 - >更改导航栏的折叠点,但这里建议的方法:

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

和这里:

Bootstrap 3 Navbar Collapse

不适用于低于768px的折叠,它似乎只能用于扩展折叠点,而不是缩回它.我有一个特殊的情况,我的导航栏有3个按钮,所以它不需要这么早崩溃.我希望它能以420px的速度崩溃.

有没有CSS解决方案？如果没有,有人可以指向我需要更改和下载的引导程序自定义页面中的正确属性吗？这可能是通用断点吗？因为没有什么我能看到的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的任何值与将断点更改为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