Bootstrap 4:如何在容器中使用带有内容的全宽导航栏(如SO导航栏)？

Question

我正在使用Bootstrap 4.

如何制作像SO导航栏一样的导航栏？

内容如同"容器"对齐,但在引导程序4中的"容器 - 流体"的宽度？

我想要"固定顶部"导航栏设置的宽度,而不是固定顶部和导航栏内容在"容器"中.

我想提供一个例子,但我想尝试制作与本页顶部的导航栏完全相同的东西.

Answer 1

我也遇到过这个问题。我通过把or放在<nav>...</nav>外面解决了。<div class='container'>...</div><div class='container-fluid'>...</div>

Answer 2

只需在元素周围包裹一个.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>

Answer 3

我能够使菜单宽度达到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