twitter-bootstrap Bootstrap 4 中心导航栏品牌与折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43487643/
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 center navbar brand with collapse
提问by Emanuel
Bootstrap 4 Alpha 6
引导程序 4 Alpha 6
I cant seem to figure out how to get both the right links and left link to both collapse. Right now only the right hand side link collapses.
我似乎无法弄清楚如何让正确的链接和左链接都折叠起来。现在只有右手边的链接崩溃。
<nav id="topNav" class="navbar fixed-top navbar-toggleable-sm navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".navbar-collapse">
Menu
</button>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<a class="navbar-brand mx-auto" href="#">NavBar</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
采纳答案by Zim
Currently in alpha 6, the collapse only supports a single target..
目前在 alpha 6 中，折叠仅支持单个目标。.
Update Bootstrap 4.1
更新引导程序 4.1
You can absolute position the brand on larger screens, and use a single collapse for the 2 navbars.
您可以在更大的屏幕上绝对定位品牌，并为 2 个导航栏使用单个折叠。
@media (min-width: 768px) {
.navbar-brand
{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}
http://www.codeply.com/go/Sh05HDqIh1
http://www.codeply.com/go/Sh05HDqIh1
Also see:
Center an element in Bootstrap 4 Navbar
How to center nav-items in Bootstrap?
回答by Sahil Dhir
You should wrapboth the menus ulin one navbar-collapsediv. Toggle Menu buttonwill only target one collapsediv not multiple. As earlierthere were two navbar-collapse.
您应该将两个菜单 ul包装在一个navbar-collapsediv 中。Toggle Menu 按钮将只针对一个折叠div而不是多个。正如前面有2导航栏崩溃。
Here is code you should use.
这是您应该使用的代码。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwtheitroadesjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav id="topNav" class="navbar fixed-top navbar-toggleable-sm navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".navbar-collapse">
Menu
</button>
<a class="navbar-brand mx-auto" href="#">NavBar</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>回答by Aslam
<nav id="topNav" class="navbar fixed-top navbar-toggleable-sm navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".navbar-collapse">
Menu
</button>
<a class="navbar-brand mx-auto" href="#">NavBar</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
回答by user3686910
The code posted by ZimSystem will overlap the menu items due to having 100% width and might clash with click events etc. A better option would be to use left instead of width.
由于宽度为 100%，ZimSystem 发布的代码将与菜单项重叠，并且可能与点击事件等发生冲突。更好的选择是使用左而不是宽度。
.navbar-brand
{
display: block;
left: 50%;
position: absolute;
text-align: center;
}
