ブートストラップnavbar、私はコンテナをネストすべきですか？

Question

documentationには、コンテナを入れ子にしないでください。 このステートメントは、多種多様なスタックオーバーフローポストで一致しているようです。

ブートストラップにはサイトコンテンツをラップするための要素が必要で、 にはグリッドシステムがあります。プロジェクト で使用する2つのコンテナのいずれかを選択できます。パディングなどにより、コンテナ はネスト可能ではありません。

ただし、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 --> 

私はブートストラップとwebdesignの新機能です。この場合、コンテナのネストを避けることができますか？なぜそれが使われたのですか？次の操作を行っていません彼らは何を入れ子にないコンテナで意味

Answer 1

...

<div class="container"> 
    <div class="container"></div> 
</div> 

各コンテナのパディングが他のうちの1を投げだろうし、それは単純に対処するようなスタイルではないのでこれはありますそのシナリオで。

上記のナビゲーションバーの例は、コンテナ内にコンテナを入れ子にしないと完全に受け入れられます。

Answer 2

これは、ブートストラップでの問題として確認されています：閉鎖されているように見えます

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

、けれども。実際の問題は、containerの中にcontainerのネストされていたようです。container-fluidではなく、そのドキュメントが反映されるように正確に更新されていませんでした。