Question

documentation显示容器永远不应该嵌套。这个陈述似乎主要在各种stackoverflow帖子中找到了协议。

Bootstrap需要一个包含元素来包装网站内容和安置我们的网格系统。您可以选择使用两个容器中的一个你的项目。需要注意的是，由于填充量较多，既不是容器是可嵌套的。

但是the bootstrap example of a navbar使用容器嵌套。

<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和webdesign的新手，在这种情况下可以/应该避免容器嵌套吗？为什么使用它？

Answer 1

不嵌套容器意味着什么不做以下......

var pagina = NS.Pages.new("Prueba", "Pagina 1");
pagina.title = "Page title";
pagina.isIndex = true;
pagina.body = "<h1 id='title'>Page title with H1</h1><p>This could be a paragraph</p>";
pagina.addScript(false, 'text/javascript', 'https://code.jquery.com/jquery-2.2.3.min.js');
pagina.addScript(true, 'text/javascript', null, "$('#title').text('The new title configured with jQuery');");
NS.Pages.load(pagina);

这是因为每个容器的填充会抛出另一个容器，并且根本没有这样的样式来处理这种情况。

上面的导航栏示例是完全可以接受的，前提是您不要将容器嵌套在容器中。

Answer 2

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

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

虽然它似乎已被关闭。似乎真正的问题是将container嵌套在container内，而不是container-fluid，并且文档没有准确更新以反映出来。

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

2 个答案: