rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-04-06 23:57:36 +02:00
Code Issues Actions 11 Packages Releases Activity

Fix .nav-justified example (#28193)

Browse Source
This commit is contained in:
Martijn Cuppens 2019-02-06 22:44:44 +01:00 committed by XhmikosR
parent b5fb4f7d6b
commit 8f4f201424
1 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
site/docs/4.2/components/navs.md
View File

@ -183,7 +183,7 @@ Force your `.nav`'s contents to extend the full available width one of two modif
<a class="nav-link active" href="#">Active</a> <a class="nav-link active" href="#">Active</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Longer nav link</a> <a class="nav-link" href="#">Much longer nav link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
@ -200,7 +200,7 @@ When using a `<nav>`-based navigation, be sure to include `.nav-item` on the anc
{% capture example %} {% capture example %}
<nav class="nav nav-pills nav-fill"> <nav class="nav nav-pills nav-fill">
<a class="nav-item nav-link active" href="#">Active</a> <a class="nav-item nav-link active" href="#">Active</a>
<a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Much longer nav link</a>
<a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Link</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav> </nav>
@ -210,12 +210,20 @@ When using a `<nav>`-based navigation, be sure to include `.nav-item` on the anc
For equal-width elements, use `.nav-justified`. All horizontal space will be occupied by nav links, but unlike the `.nav-fill` above, every nav item will be the same width. For equal-width elements, use `.nav-justified`. All horizontal space will be occupied by nav links, but unlike the `.nav-fill` above, every nav item will be the same width.
{% capture example %} {% capture example %}
<nav class="nav nav-pills nav-justified"> <ul class="nav nav-pills nav-justified">
<a class="nav-link active" href="#">Active</a> <li class="nav-item">
<a class="nav-link" href="#">Longer nav link</a> <a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a> </li>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> <li class="nav-item">
</nav> <a class="nav-link" href="#">Much longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
{% endcapture %} {% endcapture %}
{% include example.html content=example %} {% include example.html content=example %}
@ -224,7 +232,7 @@ Similar to the `.nav-fill` example using a `<nav>`-based navigation, be sure to
{% capture example %} {% capture example %}
<nav class="nav nav-pills nav-justified"> <nav class="nav nav-pills nav-justified">
<a class="nav-item nav-link active" href="#">Active</a> <a class="nav-item nav-link active" href="#">Active</a>
<a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Much longer nav link</a>
<a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link" href="#">Link</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav> </nav>
@ -238,7 +246,7 @@ If you need responsive nav variations, consider using a series of [flexbox utili
{% capture example %} {% capture example %}
<nav class="nav nav-pills flex-column flex-sm-row"> <nav class="nav nav-pills flex-column flex-sm-row">
<a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a> <a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a> <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a> <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav> </nav>