这是一个关于Bootstrap 3的老问题——如何更改导航栏的折叠点,但是这里提出的方法有:
https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint
这里:
在768px以下无法折叠,它似乎只能扩展折叠点,而不能收缩它。我有一个特殊的情况,我的导航栏有3个按钮,因此不需要那么早折叠。我希望它在420px时折叠。
有没有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;
}