Bootstrap 4：如何在容器中拥有一个包含内容的全宽导航栏（如 SO Navbar）？答案

【问题标题】：Bootstrap 4: How to have a full width navbar with the content in a container (Like the SO Navbar)?Bootstrap 4：如何在容器中拥有一个包含内容的全宽导航栏（如 SO Navbar）？
【发布时间】：2017-05-28 03:03:57
【问题描述】：

我正在使用 Bootstrap 4。

如何制作类似于 SO 导航栏的导航栏？

在 bootstrap 4 中内容像“容器”一样对齐，但宽度是“容器流体”？

我想要“固定顶部”导航栏设置的宽度，而不是固定顶部和“容器”中的导航栏内容。

我将提供一个示例，但我正在尝试制作与此页面顶部的导航栏完全相同的内容。

【问题讨论】：

标签： css twitter-bootstrap responsive-design bootstrap-4 twitter-bootstrap-4

【解决方案1】：

在.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>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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

【讨论】：

这解决了我的问题并且比容器包装更清晰
+1 表示 w-100。当您尝试填充导航栏中的菜单项时，这是要走的路。仅导航填充是不够的。

【解决方案4】：

我尝试了@ravi.ram 的答案，但它对我不起作用。这是我的代码的开始方式。请注意，导航在容器之外。解决方案在代码下方。

<nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="index.html">
              <img src="images/logo.jpg">
            </a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto mr-auto">

这里有几种可行的方法。

如果你想保留container，那么你可以使用这样的内联样式。 <div class="container" style="max-width:100%;"> 这是因为 container 的最大宽度设置为 1140 像素。
使用container-fluid 代替container
根本不要使用container。完全删除div。

另见https://codepen.io/nishitmistry/pen/VwwozwL

【讨论】：