rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-28 20:52:21 +01:00
Code Issues Actions Packages Releases Activity

Refactor navbars to simplify things

Browse Source 
* `.navbar-brand` is no longer centered, thus removing need for
max-width and a few lines of code
* Clear floats of `.navbar-brand` in the `.nav-collapse` like we did in
2.x, thus simplifying some clearing and other things.
* Restyle the `.navbar-toggle` button to align it's bars up with the
text and flow of the document.
* Restyle the `.navbar-brand` to not use padding on left/right as to
avoid negative margin and other fuckery. This limits the ability to put
a bg color on the brand, but I think that's fine for now.
This commit is contained in:
Mark Otto 2013-08-11 19:06:26 -07:00
parent c2cfd3153b
commit ba8026e00f
3 changed files with 14 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
dist/css/bootstrap.css vendored
View File

@ -2829,10 +2829,6 @@ button.close {
clear: both; clear: both;
} }
.navbar-nav {
margin-bottom: 15px;
}
.navbar-nav > li > a { .navbar-nav > li > a {
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
@ -2889,6 +2885,7 @@ button.close {
.nav-collapse { .nav-collapse {
padding-bottom: 15px; padding-bottom: 15px;
clear: both;
} }
.nav-collapse:before, .nav-collapse:before,
@ -2926,16 +2923,12 @@ button.close {
} }
.navbar-brand { .navbar-brand {
display: block; float: left;
max-width: 200px; padding-top: 15px;
padding: 15px 15px; padding-bottom: 15px;
margin-right: auto;
margin-left: auto;
font-size: 18px; font-size: 18px;
font-weight: 500;
line-height: 20px; line-height: 20px;
color: #777777; color: #777777;
text-align: center;
} }
.navbar-brand:hover, .navbar-brand:hover,
@ -2948,10 +2941,9 @@ button.close {
.navbar-toggle { .navbar-toggle {
position: relative; position: relative;
float: right; float: right;
width: 48px; padding: 9px 10px;
height: 34px;
padding: 6px 12px;
margin-top: 8px; margin-top: 8px;
margin-right: -10px;
margin-bottom: 8px; margin-bottom: 8px;
background-color: transparent; background-color: transparent;
border: 1px solid #dddddd; border: 1px solid #dddddd;
@ -3121,12 +3113,6 @@ button.close {
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.navbar-brand {
float: left;
max-width: none;
margin-right: 5px;
margin-left: -15px;
}
.navbar-nav { .navbar-nav {
float: left; float: left;
margin-top: 0; margin-top: 0;

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

25
less/navbar.less
View File

@ -20,8 +20,6 @@
// ------------------------- // -------------------------
.navbar-nav { .navbar-nav {
margin-bottom: 15px;
> li > a { > li > a {
padding-top: ((@navbar-height - @line-height-computed) / 2); padding-top: ((@navbar-height - @line-height-computed) / 2);
padding-bottom: ((@navbar-height - @line-height-computed) / 2); padding-bottom: ((@navbar-height - @line-height-computed) / 2);
@ -87,6 +85,8 @@
} }
.nav-collapse { .nav-collapse {
// Prevent overlap of `.navbar-brand` and `.navbar-toggle`
clear: both;
// Space out collapsed contents within the mobile navbar // Space out collapsed contents within the mobile navbar
padding-bottom: @navbar-padding-vertical; padding-bottom: @navbar-padding-vertical;
// Clear floated elements and prevent collapsing of padding // Clear floated elements and prevent collapsing of padding
@ -127,16 +127,12 @@
// Brand/project name // Brand/project name
.navbar-brand { .navbar-brand {
display: block; float: left;
max-width: 200px; padding-top: @navbar-padding-vertical;
margin-left: auto; padding-bottom: @navbar-padding-vertical;
margin-right: auto;
padding: @navbar-padding-vertical @navbar-padding-horizontal;
font-size: @font-size-large; font-size: @font-size-large;
font-weight: 500;
line-height: @line-height-computed; line-height: @line-height-computed;
color: @navbar-brand-color; color: @navbar-brand-color;
text-align: center;
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-brand-hover-color; color: @navbar-brand-hover-color;
@ -149,10 +145,9 @@
.navbar-toggle { .navbar-toggle {
position: relative; position: relative;
float: right; float: right;
height: 34px; padding: 9px 10px;
width: 48px;
.navbar-vertical-align(34px); .navbar-vertical-align(34px);
padding: @padding-base-vertical @padding-base-horizontal; margin-right: -10px;
background-color: transparent; background-color: transparent;
border: 1px solid @navbar-toggle-border-color; border: 1px solid @navbar-toggle-border-color;
border-radius: @border-radius-base; border-radius: @border-radius-base;
@ -327,12 +322,6 @@
@media screen and (min-width: @grid-float-breakpoint) { @media screen and (min-width: @grid-float-breakpoint) {
.navbar-brand {
float: left;
margin-left: -(@navbar-padding-horizontal);
margin-right: 5px;
max-width: none; // Disables the default mobile setting
}
.navbar-nav { .navbar-nav {
float: left; float: left;
// undo margin to make nav extend full height of navbar // undo margin to make nav extend full height of navbar