Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/twbs/bootstrap.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
path: root/site
diff options
context:
space:
mode:
authorMartijn Cuppens <martijn.cuppens@gmail.com>2019-02-07 00:44:44 +0300
committerXhmikosR <xhmikosr@gmail.com>2019-02-07 00:44:44 +0300
commit8f4f2014240479128872c438e93003b588cb819b (patch)
treed167247666279af2e8668ac41beabc97ec226794 /site
parentb5fb4f7d6b8ca131e1b12f2ad6e06fd8cde9ffe7 (diff)
Fix `.nav-justified` example (#28193)
Diffstat (limited to 'site')
-rw-r--r--site/docs/4.2/components/navs.md28
1 files changed, 18 insertions, 10 deletions
diff --git a/site/docs/4.2/components/navs.md b/site/docs/4.2/components/navs.md
index 7b22464555..21375f18c1 100644
--- a/site/docs/4.2/components/navs.md
+++ b/site/docs/4.2/components/navs.md
@@ -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>
</li>
<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 class="nav-item">
<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 %}
<nav class="nav nav-pills nav-fill">
<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 disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</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.
{% capture example %}
-<nav class="nav nav-pills nav-justified">
- <a class="nav-link active" href="#">Active</a>
- <a class="nav-link" href="#">Longer nav link</a>
- <a class="nav-link" href="#">Link</a>
- <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
-</nav>
+<ul class="nav nav-pills nav-justified">
+ <li class="nav-item">
+ <a class="nav-link active" href="#">Active</a>
+ </li>
+ <li class="nav-item">
+ <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 %}
{% 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 %}
<nav class="nav nav-pills nav-justified">
<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 disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
@@ -238,7 +246,7 @@ If you need responsive nav variations, consider using a series of [flexbox utili
{% capture example %}
<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" 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 disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>