CSS Bootstrap 4：如何在容器中使用全宽导航栏（如 SO 导航栏）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41622790/
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: How to have a full width navbar with the content in a container (Like the SO Navbar)?
提问by bbennett36
I am using Bootstrap 4.
我正在使用 Bootstrap 4。
How do I make a navbar like the SO navbar?
如何制作类似于 SO 导航栏的导航栏？
With the content aligned like a "container" but the width of a "container-fluid" in bootstrap 4?
内容像“容器”一样对齐，但引导程序 4 中“容器流体”的宽度？
I want the width of the "fixed-top" navbar setting without it being fixed-top and the navbar content in a "container".
我想要“固定顶部”导航栏设置的宽度而不是固定顶部和“容器”中的导航栏内容。
I would provide an example but I'm trying to make something exactly like the navbar at the top of this page.
我会提供一个示例，但我正在尝试制作与此页面顶部的导航栏完全相同的内容。
回答by Ravi Ram
I was able to get the menu to 100% width
我能够将菜单设置为 100% 宽度
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
</ul>
using nav-fill w-100with Bootstrap 4
在 Bootstrap 4 中使用导航填充 w-100
回答by hungerstar
Wrap an element around the .containerelement.
将元素包裹在元素周围.container。
@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );
#primary-nav {
background-color: skyblue;
}<div id="primary-nav">
<div class="container">
<ul class="nav">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
</ul>
</div>
</div>回答by Vandy Sodanheang
I had met this issue also. I solved by put the <nav>...</nav>outside the <div class='container'>...</div>or <div class='container-fluid'>...</div>.
我也遇到过这个问题。我通过把or放在<nav>...</nav>外面解决了。<div class='container'>...</div><div class='container-fluid'>...</div>
