Bootstrap 4：如何在容器内拥有全宽度的导航栏（类似于SO导航栏）？

Question

我正在使用Bootstrap 4。

如何制作像SO导航栏一样的导航栏？内容对齐方式要像“容器”，但宽度要像Bootstrap 4中的“container-fluid”。

我想要设置"fixed-top"导航栏的宽度，但不需要固定在顶部，并使导航栏内容放在一个“容器”中。

我可以提供一个示例，但我试图制作与此页面顶部导航栏完全相同的东西。

- bbennett36

Answer 1

我成功将菜单宽度设置为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

- Ravi Ram

---

这解决了我的问题，而且比容器包装更清晰明了。 - StonedTensor

+1 for w-100。当您尝试填充导航栏内的菜单项时，这是正确的方法。仅使用nav-fill是不够的。 - revobtz

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>

- hungerstar

Answer 3

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

- Vandy Sodanheang

Answer 4

您可以尝试将导航类更改为class="navbar navbar navbar-expand-md navbar-light fixed-top"，这样您就可以获得全宽度的导航栏。

- Harsh Kumar Singh

Answer 5

我尝试了@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">

以下是几种可行的方法。

1. 如果您想保留 container，则可以使用内联样式，如下所示：<div class="container" style="max-width:100%;"> 这是因为 container 的最大宽度设置为 1140px。

2. 使用 container-fluid 替代 container

3. 根本不使用 container。完全删除 div。

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

- Umair