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

fixes #18295. improve .nav-inline usefulness and document the classes as well

Browse Source
This commit is contained in:
Mark Otto 2015-11-29 19:38:44 -08:00
parent 1a30d12525
commit 389a284766
2 changed files with 37 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
docs/components/navs.md
View File

@ -47,6 +47,38 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
</nav>
{% endexample %}
## Inline
Easily space out nav links in a horizontal band with `.nav-inline`. Longer series of links will wrap to a new line.
{% example html %}
<nav class="nav nav-inline">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Another link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
{% endexample %}
The same works for a navigation build with lists.
{% example html %}
<ul class="nav nav-inline">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
{% endexample %}
## Tabs
Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface. Use them to create tabbable regions with our [tab JavaScript plugin](#javascript-behavior).

5
scss/_nav.scss
View File

@ -32,6 +32,11 @@
// Nav inline
.nav-inline {
.nav-item {
display: inline-block;
}
.nav-item + .nav-item,
.nav-link + .nav-link {
margin-left: 1rem;
}