mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
flexbox this thing
- drop the table styles, use flex - remove commented out code - consolidate styles a bit - add a huge flex-grow to the nav, making the assumption you want nav to take up most space
This commit is contained in:
Mark Otto
Mark Otto
parent
4a06c98027
commit
18453f06f9
@ -22,10 +22,8 @@
|
||||
|
||||
<nav class="navbar navbar-dark bg-inverse">
|
||||
<div class="navbar-container">
|
||||
<div class="navbar-item">
|
||||
<a class="navbar-brand" href="#">Default</a>
|
||||
</div>
|
||||
<ul class="navbar-item nav navbar-nav">
|
||||
<a class="navbar-brand" href="#">Default</a>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
@ -39,7 +37,7 @@
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="navbar-item form-inline text-md-right">
|
||||
<form class="form-inline text-md-right">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
<button class="btn btn-outline-success my-2 my-md-0" type="submit">Search</button>
|
||||
</form>
|
||||
@ -48,13 +46,11 @@
|
||||
|
||||
<nav class="navbar navbar-dark bg-inverse">
|
||||
<div class="navbar-container">
|
||||
<div class="navbar-item">
|
||||
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
|
||||
<a class="navbar-brand" href="#">Responsive</a>
|
||||
</div>
|
||||
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
|
||||
<a class="navbar-brand" href="#">Responsive</a>
|
||||
|
||||
<div class="collapse navbar-toggleable-md" id="navbarResponsive">
|
||||
<ul class="navbar-item navbar-item-primary nav navbar-nav">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
@ -68,7 +64,7 @@
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="navbar-item form-inline text-md-right">
|
||||
<form class="form-inline text-md-right">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
<button class="btn btn-outline-success my-2 my-md-0" type="submit">Search</button>
|
||||
</form>
|
||||
@ -76,39 +72,10 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-dark bg-inverse">
|
||||
<div class="navbar-container">
|
||||
<div class="navbar-item navbar-item-primary">
|
||||
<a class="navbar-brand mr-2" href="#">Primary</a>
|
||||
<ul class="nav navbar-nav d-inline-block">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<form class="navbar-item form-inline text-md-right">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
<button class="btn btn-outline-success my-2 my-md-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-dark bg-inverse">
|
||||
<div class="navbar-container navbar-container-justified">
|
||||
<div class="navbar-item">
|
||||
<a class="navbar-brand" href="#">Justified & Centered nav</a>
|
||||
</div>
|
||||
<ul class="navbar-item nav navbar-nav text-md-center">
|
||||
<a class="navbar-brand" href="#">Justified & Centered nav</a>
|
||||
<ul class="nav navbar-nav text-md-center">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
@ -122,7 +89,7 @@
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="navbar-item form-inline text-md-right">
|
||||
<form class="form-inline text-md-right">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
<button class="btn btn-outline-success my-2 my-md-0" type="submit">Search</button>
|
||||
</form>
|
||||
|
||||
@ -5,95 +5,41 @@
|
||||
|
||||
.navbar {
|
||||
position: relative;
|
||||
// padding: $navbar-padding-y $navbar-padding-x;
|
||||
// @include clearfix;
|
||||
|
||||
// @include media-breakpoint-up(sm) {
|
||||
// @include border-radius($navbar-border-radius);
|
||||
// }
|
||||
padding: $navbar-padding-y $navbar-padding-x;
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
@include media-breakpoint-up(sm) {
|
||||
display: table;
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
// .navbar-container-justified
|
||||
// // .navbar-container-justified
|
||||
&-justified {
|
||||
table-layout: fixed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-item {
|
||||
display: block;
|
||||
padding: $navbar-padding-y $navbar-padding-x;
|
||||
// padding: .5rem .75rem;
|
||||
vertical-align: middle;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
display: table-cell;
|
||||
white-space: nowrap;
|
||||
|
||||
// .navbar-item-primary
|
||||
&-primary {
|
||||
width: 99%;
|
||||
|
||||
~ .navbar-item {
|
||||
width: 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
// .nav-item {
|
||||
// display: block;
|
||||
// }
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: .425rem .5rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
justify-content: space-between; // todo: drop for util
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler-left {
|
||||
position: absolute;
|
||||
// top: $navbar-padding-y;
|
||||
left: $navbar-padding-x;
|
||||
}
|
||||
|
||||
.navbar-toggler-right {
|
||||
position: absolute;
|
||||
// top: $navbar-padding-y;
|
||||
right: $navbar-padding-x;
|
||||
}
|
||||
|
||||
|
||||
// .navbar-collapse-sm
|
||||
|
||||
|
||||
|
||||
// Navbar alignment options
|
||||
//
|
||||
// Display the navbar across the entirety of the page or fixed it to the top or
|
||||
// bottom of the page.
|
||||
|
||||
// A static, full width modifier with no rounded corners.
|
||||
// .navbar-full {
|
||||
// z-index: $zindex-navbar;
|
||||
//
|
||||
// @include media-breakpoint-up(sm) {
|
||||
// @include border-radius(0);
|
||||
// }
|
||||
// }
|
||||
|
||||
// Fix the top/bottom navbars when screen real estate supports it
|
||||
.navbar-fixed-top,
|
||||
.navbar-fixed-bottom {
|
||||
@ -134,10 +80,6 @@
|
||||
//
|
||||
|
||||
.navbar-brand {
|
||||
// float: left;
|
||||
// padding-top: $navbar-brand-padding-y;
|
||||
// padding-bottom: $navbar-brand-padding-y;
|
||||
// margin-right: 1rem;
|
||||
display: inline-block;
|
||||
padding: .25rem .5rem;
|
||||
font-size: $font-size-lg;
|
||||
@ -200,25 +142,21 @@
|
||||
//
|
||||
// Custom navbar navigation built on the base `.nav` styles.
|
||||
|
||||
// .navbar-nav {
|
||||
// .nav-item {
|
||||
// float: left;
|
||||
// }
|
||||
//
|
||||
// .nav-link {
|
||||
// display: block;
|
||||
// padding-top: .425rem;
|
||||
// padding-bottom: .425rem;
|
||||
//
|
||||
// + .nav-link {
|
||||
// margin-left: 1rem;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .nav-item + .nav-item {
|
||||
// margin-left: 1rem;
|
||||
// }
|
||||
// }
|
||||
.navbar-nav {
|
||||
flex-grow: 10; // high number to force alignment
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: .425rem .5rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dark links against a light background
|
||||
.navbar-light {
|
||||
@ -330,31 +268,16 @@
|
||||
@include clearfix;
|
||||
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
// .navbar-brand {
|
||||
// display: block;
|
||||
// float: none;
|
||||
// margin-top: .5rem;
|
||||
// margin-right: 0;
|
||||
// }
|
||||
|
||||
.navbar-nav {
|
||||
// margin-top: .5rem;
|
||||
// margin-bottom: .5rem;
|
||||
|
||||
.dropdown-menu {
|
||||
position: static;
|
||||
float: none;
|
||||
}
|
||||
|
||||
// .nav-item {
|
||||
// float: none;
|
||||
// margin-left: 0;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($next) {
|
||||
display: table-cell !important;
|
||||
display: flex !important;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user