From 1a50fc70437e87f3cae97674d296cca98db8c565 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 9 Jun 2020 08:10:42 +0300 Subject: [PATCH] Backport #30973 Remove the class `.nav-item` from `.nav-link` inside the non `ul` or `ol` based navs. This makes the consistency for `.nav-item` (This class will not be required on the `.nav-link`). `.nav-item` was only required when you use `.nav-fill` or `.nav-justified` on the `.nav`. In other cases, it was redundant. And the purpose of `.nav-item` on `.nav-link`s can be achieved via flexbox utilities as well (Mentioned in the docs also). --- js/tests/unit/tab.js | 10 +++++----- scss/_nav.scss | 2 ++ site/docs/4.5/components/navbar.md | 8 ++++---- 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 9b452eb1c2d7..6e25f09ddab8 100644 --- a/js/tests/unit/tab.js +++ b/js/tests/unit/tab.js @@ -350,15 +350,15 @@ $(function () { var done = assert.async() var tabsHTML = '' + '
' + '
' + ' ' + '
' + '
Nested Tab1 Content
' + diff --git a/scss/_nav.scss b/scss/_nav.scss index b8b73bb7ab26..d866c9841344 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 69df11b34050..4d26be3197d4 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 diff --git a/site/docs/4.5/components/navs.md b/site/docs/4.5/components/navs.md index 0787632be4c7..4bcf2e320d77 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 `