twitter-bootstrap 在 Bootstrap 4 (alpha 5) 中居中导航栏内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40516523/
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
Centering the navbar content in Bootstrap 4 (alpha 5)
提问by Ole Kristian Losvik
I am trying to center the navbar content in Bootstrap 4, alpha 5. I have been googling a bit, and I guess there might be some trick involving d-blockand mx-auto.
我试图在 Bootstrap 4, alpha 5 中将导航栏内容居中。我一直在谷歌搜索，我想可能有一些涉及d-block和 的技巧mx-auto。
However I cannot find out how to center the navigation links so that they are total in center, not just adding a container around them.
但是我不知道如何将导航链接居中，使它们完全居中，而不仅仅是在它们周围添加一个容器。
Sample navbar code I am playing with:.
我正在使用的示例导航栏代码：。
<nav class="navbar navbar-light bg-faded">
<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 dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
采纳答案by Nope
You could add this code to your css file.
您可以将此代码添加到您的 css 文件中。
.nav {
text-align: center;
}
.navbar-nav .nav-item {
float: inherit;
display: inline-block;
}
回答by Zim
Centering Navbar items is simpler in Bootstrap 4, and doesn't require additional markup.
在 Bootstrap 4 中居中导航栏项目更简单，并且不需要额外的标记。
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<ul class="navbar-nav mx-auto">
<li class="nav-item active text-center">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown text-center">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
Bootstrap 4 Center Navbar Demo(updated for v4.0.0)
Bootstrap 4 Center Navbar Demo（针对v4.0.0更新）
If you need to center only specific elements, such as the Brand or Links, see this answer
如果您只需要将特定元素（例如品牌或链接）居中，请参阅此答案
