mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
Fixes #11783: Document requirement of .container(-fluid) in navbars
This commit is contained in:
Mark Otto
parent
540677c42a
commit
93a4d6cc5e
131
components.html
131
components.html
@ -2295,33 +2295,36 @@ 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 -->
|
||||
<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>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Brand</a>
|
||||
</div>
|
||||
<!-- 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>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<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>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
</ul>
|
||||
</div><!-- /.navbar-collapse -->
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<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,33 +2339,36 @@ 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 -->
|
||||
<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>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Brand</a>
|
||||
</div>
|
||||
<!-- 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>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<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>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
</ul>
|
||||
</div><!-- /.navbar-collapse -->
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-7">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<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,33 +2383,38 @@ 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 -->
|
||||
<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>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Brand</a>
|
||||
</div>
|
||||
<!-- 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>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<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-8">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
</ul>
|
||||
</div><!-- /.navbar-collapse -->
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<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 %}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user