twitter-bootstrap Bootstrap 4 导航栏菜单（移动）样式像 Bootstrap 3 一样？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39311475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 navbar menu (mobile) style like in Bootstrap 3?
提问by Andrey K.
Bootstrap 4 example
引导程序 4 示例
Bootstrap 3 example
引导程序 3 示例
How to get Bootstrap 4 menu like in Bootstrap 3?
如何像 Bootstrap 3 一样获得 Bootstrap 4 菜单？
This code from bootstrap 4 http://v4-alpha.getbootstrap.com/examples/navbar/:
此代码来自 bootstrap 4 http://v4-alpha.getbootstrap.com/examples/navbar/：
<div class="container">
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header">
☰
</button>
<div class="collapse navbar-toggleable-xs" id="navbar-header">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav> <!-- /navbar -->
</div><!-- /container -->
回答by Steve K
You need to add some css in bootstrap 4 and I imagine they are doing this because you can toggle the menu at different sizes so you need to add the media queries to whatever size you want your menu to open at. Something like so:
您需要在 bootstrap 4 中添加一些 css，我想他们这样做是因为您可以切换不同大小的菜单，因此您需要将媒体查询添加到您希望菜单打开的任何大小。像这样：
Here is a fiddle with some custom styles for the bootstrap 4 navbar Bootstrap 4 Navbar Fiddle
这是一个带有一些自定义样式的小提琴，用于 bootstrap 4 导航栏Bootstrap 4 Navbar Fiddle
@media(max-width:33.9em) {
.navbar .collapse {max-height:250px;width:100%;overflow-y:auto;overflow-x:hidden;}
.navbar .navbar-brand {float:none;display: inline-block;}
.navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem;}
.navbar .navbar-nav {float:none !important;}
.nav-item{width:100%;text-align:left;}
.navbar .collapse .dropdown-menu {
position: relative;
float: none;
background:none;
border:none;
}
}
