mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-19 16:54:24 +01:00
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:
parent
699d8a5a80
commit
d9baeeb0af
@ -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;
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user