Fixes #11783: Document requirement of .container(-fluid) in navbars

components.html

@@ -2295,10 +2295,11 @@ base_url: "../"
 
 
     <h2 id="navbar-fixed-top">Fixed to top</h2>
-    <p>Add <code>.navbar-fixed-top</code>.</p>
+    <p>Add <code>.navbar-fixed-top</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
     <div class="bs-example bs-navbar-top-example">
       <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
-        <!-- Brand and toggle get grouped for better mobile display -->
+        <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
+        <div class="container-fluid">
           <div class="navbar-header">
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">
               <span class="sr-only">Toggle navigation</span>
@@ -2309,7 +2310,6 @@ base_url: "../"
             <a class="navbar-brand" href="#">Brand</a>
           </div>
 
-        <!-- Collect the nav links, forms, and other content for toggling -->
           <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6">
             <ul class="nav navbar-nav">
               <li class="active"><a href="#">Home</a></li>
@@ -2317,11 +2317,14 @@ base_url: "../"
               <li><a href="#">Link</a></li>
             </ul>
           </div><!-- /.navbar-collapse -->
+        </div>
       </nav>
     </div><!-- /example -->
 {% highlight html %}
 <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+  <div class="container">
     ...
+  </div>
 </nav>
 {% endhighlight %}
 
@@ -2336,10 +2339,11 @@ body { padding-top: 70px; }
 
 
     <h2 id="navbar-fixed-bottom">Fixed to bottom</h2>
-    <p>Add <code>.navbar-fixed-bottom</code> instead.</p>
+    <p>Add <code>.navbar-fixed-bottom</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
     <div class="bs-example bs-navbar-bottom-example">
       <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
-        <!-- Brand and toggle get grouped for better mobile display -->
+        <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
+        <div class="container-fluid">
           <div class="navbar-header">
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-7">
               <span class="sr-only">Toggle navigation</span>
@@ -2350,7 +2354,6 @@ body { padding-top: 70px; }
             <a class="navbar-brand" href="#">Brand</a>
           </div>
 
-        <!-- Collect the nav links, forms, and other content for toggling -->
           <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-7">
             <ul class="nav navbar-nav">
               <li class="active"><a href="#">Home</a></li>
@@ -2358,11 +2361,14 @@ body { padding-top: 70px; }
               <li><a href="#">Link</a></li>
             </ul>
           </div><!-- /.navbar-collapse -->
+        </div>
       </nav>
     </div><!-- /example -->
 {% highlight html %}
 <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
+  <div class="container">
     ...
+  </div>
 </nav>
 {% endhighlight %}
 
@@ -2377,10 +2383,12 @@ body { padding-bottom: 70px; }
 
 
     <h2 id="navbar-static-top">Static top</h2>
-    <p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
+    <p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code> and include a <code>.container</code> or <code>.container-fluid</code> to center and pad navbar content.</p>
+    <p>Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
     <div class="bs-example bs-navbar-top-example">
       <nav class="navbar navbar-default navbar-static-top" role="navigation">
-        <!-- Brand and toggle get grouped for better mobile display -->
+        <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
+        <div class="container-fluid">
           <div class="navbar-header">
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8">
               <span class="sr-only">Toggle navigation</span>
@@ -2399,11 +2407,14 @@ body { padding-bottom: 70px; }
               <li><a href="#">Link</a></li>
             </ul>
           </div><!-- /.navbar-collapse -->
+        </div>
       </nav>
     </div><!-- /example -->
 {% highlight html %}
 <nav class="navbar navbar-default navbar-static-top" role="navigation">
+  <div class="container">
     ...
+  </div>
 </nav>
 {% endhighlight %}