mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-05 16:42:29 +03:00
Code Activity

flexbox this thing

Browse Source 
- 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
2016-12-21 12:27:18 -08:00
committed by Mark Otto
parent 4a06c98027
commit 18453f06f9
2 changed files with 33 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/examples/navbar/all-navbars.html
+10 -43
View File
@@ -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 &amp; Centered nav</a>
</div>
<ul class="navbar-item nav navbar-nav text-md-center">
<a class="navbar-brand" href="#">Justified &amp; 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>