diff options
author | Mark Otto <markd.otto@gmail.com> | 2016-11-26 04:46:13 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2016-11-26 04:46:13 +0300 |
commit | d315c9499d461a76054032725a2065cc6766e6c8 (patch) | |
tree | d7f46dd26c0304b1386db56058e740f70ec2e2d3 /scss/_nav.scss | |
parent | f2b98f6b2c52d6132524036bc327baee2eda3a48 (diff) |
v4: Flexbox nav options (#21201)
* Add some flexbox nav components
- Includes .nav-justified for inline, tab, and pill nav components
- Includes example of using the flex utils (.d- and .flex-items-) for centered nav
* redo heading hierarchy a bit
Diffstat (limited to 'scss/_nav.scss')
-rw-r--r-- | scss/_nav.scss | 22 |
1 files changed, 22 insertions, 0 deletions
diff --git a/scss/_nav.scss b/scss/_nav.scss index 640956ca2f..0f635e794e 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -155,3 +155,25 @@ display: block; } } + + +// Justified navigation (flexbox only) +// +// Justified nav components are only built for flexbox mode in Bootstrap 4. In +// previous versions, this component variation was limited to anchor-based nav +// implementations--meaning it couldn't be used on button elements. This is due +// to a longstanding Safari bug in responsive table styles. +// +// Using flexbox, we avoid that problem altogether at the cost of no default +// justified navigation for default Bootstrap. Sorry, y'all <3. + +@if $enable-flex { + .nav-justified { + display: flex; + + .nav-item { + flex: 1; + text-align: center; + } + } +} |