rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-20 17:54:23 +01:00
Code Issues Actions Packages Releases Activity

Fix justified nav styles and update nav docs for fill/justify

Browse Source 
- Justified and fill nav variants need .nav-item classes on the anchors in addition to .nav-link
- Fix broken styles for the .nav-justified class which wasn't actually doing what we needed it to
This commit is contained in:
Mark Otto 2017-03-19 15:47:34 -07:00
parent bfcfbb7d5c
commit caebfcd246
2 changed files with 24 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/components/navs.md
View File

@ -185,6 +185,17 @@ Force your `.nav`'s contents to extend the full available width one of two modif
</ul> </ul>
{% endexample %} {% endexample %}
When using a `<nav>`-based navigation, be sure to include `.nav-item` on the anchors.
{% example html %}
<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="#">Link</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav>
{% endexample %}
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.
{% example html %} {% example html %}
@ -204,6 +215,17 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ
</ul> </ul>
{% endexample %} {% endexample %}
Similar to the `.nav-fill` example using a `<nav>`-based navigation, be sure to include `.nav-item` on the anchors.
{% example html %}
<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="#">Link</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav>
{% endexample %}
## Working with flex utilities ## Working with flex utilities
If you need responsive nav variations, consider using a series of [flexbox utilities]({{ site.baseurl }}/utilities/flexbox/). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint. If you need responsive nav variations, consider using a series of [flexbox utilities]({{ site.baseurl }}/utilities/flexbox/). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.

3
scss/_nav.scss
View File

@ -99,7 +99,8 @@
.nav-justified { .nav-justified {
.nav-item { .nav-item {
flex: 1 1 100%; flex-grow: 1;
flex-basis: 0;
text-align: center; text-align: center;
} }
} }