我正在使用Bootstrap 4。
如何制作像SO导航栏一样的导航栏?
内容如同“容器”对齐,但在引导程序4中的“容器 - 流体”的宽度?
我想要“固定顶部”导航栏设置的宽度,而不是固定顶部和导航栏内容在“容器”中。
我想提供一个例子,但我想尝试制作与本页顶部的导航栏完全相同的东西。
在.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>
我能够将菜单设置为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>
使用带有Bootstrap 4的nav-fill w-100
我也遇到过这个问题。我解决了将<nav>...</nav>
放在<div class='container'>...</div>
或<div class='container-fluid'>...</div>
之外。