diff options
| -rw-r--r-- | js/tests/unit/tab.js | 10 | ||||
| -rw-r--r-- | scss/_nav.scss | 2 | ||||
| -rw-r--r-- | site/docs/4.5/components/navbar.md | 8 | ||||
| -rw-r--r-- | site/docs/4.5/components/navs.md | 32 |
4 files changed, 27 insertions, 25 deletions
diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js index 9b452eb1c2..6e25f09dda 100644 --- a/js/tests/unit/tab.js +++ b/js/tests/unit/tab.js @@ -350,15 +350,15 @@ $(function () { var done = assert.async() var tabsHTML = '<nav class="nav nav-tabs" role="tablist">' + - ' <a id="tab1" href="#x-tab1" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>' + - ' <a href="#x-tab2" class="nav-item nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>' + - ' <a href="#x-tab3" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>' + + ' <a id="tab1" href="#x-tab1" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>' + + ' <a href="#x-tab2" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>' + + ' <a href="#x-tab3" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>' + '</nav>' + '<div class="tab-content">' + ' <div class="tab-pane" id="x-tab1" role="tabpanel">' + ' <nav class="nav nav-tabs" role="tablist">' + - ' <a href="#nested-tab1" class="nav-item nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab1" aria-selected="true">Nested Tab 1</a>' + - ' <a id="tabNested2" href="#nested-tab2" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>' + + ' <a href="#nested-tab1" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab1" aria-selected="true">Nested Tab 1</a>' + + ' <a id="tabNested2" href="#nested-tab2" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>' + ' </nav>' + ' <div class="tab-content">' + ' <div class="tab-pane active" id="nested-tab1" role="tabpanel">Nested Tab1 Content</div>' + diff --git a/scss/_nav.scss b/scss/_nav.scss index b8b73bb7ab..d866c98413 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -92,6 +92,7 @@ // .nav-fill { + > .nav-link, .nav-item { flex: 1 1 auto; text-align: center; @@ -99,6 +100,7 @@ } .nav-justified { + > .nav-link, .nav-item { flex-basis: 0; flex-grow: 1; diff --git a/site/docs/4.5/components/navbar.md b/site/docs/4.5/components/navbar.md index 69df11b340..4d26be3197 100644 --- a/site/docs/4.5/components/navbar.md +++ b/site/docs/4.5/components/navbar.md @@ -157,10 +157,10 @@ And because we use classes for our navs, you can avoid the list-based approach e </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> - <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> - <a class="nav-item nav-link" href="#">Features</a> - <a class="nav-item nav-link" href="#">Pricing</a> - <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> + <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" href="#">Features</a> + <a class="nav-link" href="#">Pricing</a> + <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </div> </div> </nav> diff --git a/site/docs/4.5/components/navs.md b/site/docs/4.5/components/navs.md index 0787632be4..4bcf2e320d 100644 --- a/site/docs/4.5/components/navs.md +++ b/site/docs/4.5/components/navs.md @@ -195,14 +195,14 @@ Force your `.nav`'s contents to extend the full available width one of two modif {% endcapture %} {% include example.html content=example %} -When using a `<nav>`-based navigation, be sure to include `.nav-item` on the anchors. +When using a `<nav>`-based navigation, you can safely omit `.nav-item` as only `.nav-link` is required for styling `<a>` elements. {% 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="#">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> + <a class="nav-link active" href="#">Active</a> + <a class="nav-link" href="#">Much 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> {% endcapture %} {% include example.html content=example %} @@ -227,14 +227,14 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ {% endcapture %} {% include example.html content=example %} -Similar to the `.nav-fill` example using a `<nav>`-based navigation, be sure to include `.nav-item` on the anchors. +Similar to the `.nav-fill` example using a `<nav>`-based navigation. {% 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="#">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> + <a class="nav-link active" href="#">Active</a> + <a class="nav-link" href="#">Much 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> {% endcapture %} @@ -376,9 +376,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or <div class="bd-example bd-example-tabs"> <nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> - <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> - <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> - <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> + <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> + <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> + <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> </div> </nav> <div class="tab-content" id="nav-tabContent"> @@ -397,9 +397,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or {% highlight html %} <nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> - <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> - <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> - <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> + <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> + <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> + <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> </div> </nav> <div class="tab-content" id="nav-tabContent"> |