Change up the "justified" nav options

Given move to flexbox, we can make this available for everyone and clean it up some.

- Simplifies the `.nav-justified` styles to build on the flex-powered `.nav` base class.

- Adds the `.nav-fill` to make nav links fill available horizontal space, but not equal width.
This commit is contained in:
Mark Otto 2016-12-23 10:40:54 -08:00 committed by Mark Otto
parent 699d8a5a80
commit d9baeeb0af

View File

@ -96,24 +96,30 @@
}
}
.nav-stacked {
.nav-item {
display: block;
float: none;
+ .nav-item {
margin-top: $nav-item-margin;
margin-left: 0;
}
//
// Justified variants
//
.nav-fill {
.nav-item {
flex: 1 1 auto;
text-align: center;
}
}
.nav-justified {
.nav-item {
flex: 1 1 100%;
text-align: center;
}
}
//
// Tabbable tabs
//
// Hide tabbable panes to start, show them when `.active`
.tab-content {
> .tab-pane {
display: none;
@ -122,23 +128,3 @@
display: block;
}
}
// Justified navigation
//
// 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.
.nav-justified {
display: flex;
.nav-item {
flex: 1;
text-align: center;
}
}