Bootstrap导航栏，我应该嵌套容器吗？

Question

它显示在文档该容器不应该被嵌套。在不同的stackoverflow帖子中，该声明似乎都发现了大部分共识。

Bootstrap需要一个包含元素来包装站点内容并容纳我们的网格系统。您可以选择在项目中使用的两个容器之一。请注意，由于填充等原因，这两个容器都不可嵌套。

但是，导航栏的引导示例使用容器嵌套。

<div class="container">
  <!-- Static navbar -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Project name</a>
  </div>
  <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li class="dropdown-header">Nav header</li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
      <li><a href="../navbar-static-top/">Static top</a></li>
      <li><a href="../navbar-fixed-top/">Fixed top</a></li>
    </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </nav>

  <!-- Main component for a primary marketing message or call to action -->
  <div class="jumbotron">
    <h1>Navbar example</h1>
    <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
    <p>
      <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
    </p>
  </div>

</div> <!-- /container -->

我是Bootstrap和Web设计的新手，在这种情况下可以/应该避免容器嵌套吗？为什么使用它？

Answer 1

这已被确定为 Bootstrap 中的一个问题：

https://github.com/twbs/bootstrap/issues/15512

虽然，它似乎已经关闭了。看来真正的问题是嵌套container在内部container，而不是那么多container-fluid，并且文档没有准确更新以反映这一点。