0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-28 20:52:21 +01:00

introduce new mixin to do navbar vertical centering

This commit is contained in:
Mark Otto 2012-02-20 19:14:26 -08:00
parent 143b3db2c9
commit d2630ff84e
4 changed files with 26 additions and 15 deletions

Binary file not shown.

View File

@ -2559,14 +2559,16 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
.navbar-form:after {
clear: both;
}
.navbar-form input,
.navbar-form select,
.navbar-form .radio,
.navbar-form .checkbox {
margin-top: 5px;
}
.navbar-form input, .navbar-form select {
display: inline-block;
margin-top: 5px;
margin-bottom: 0;
}
.navbar-form .radio, .navbar-form .checkbox {
margin-top: 5px;
}
.navbar-form input[type="image"], .navbar-form input[type="checkbox"], .navbar-form input[type="radio"] {
margin-top: 3px;
}

View File

@ -531,7 +531,7 @@
// COMPONENT MIXINS
// --------------------------------------------------
// NAV DIVIDER
// Horizontal dividers
// -------------------------
// Dividers (basically an hr) within dropdowns and nav lists
.nav-divider() {
@ -549,7 +549,7 @@
*margin: -5px 0 5px;
}
// BUTTON BACKGROUNDS
// Button backgrounds
// ------------------
.buttonBackground(@startColor, @endColor) {
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
@ -568,7 +568,15 @@
}
}
// POPOVER ARROWS
// Navbar vertical align
// -------------------------
// Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
.navbarVerticalAlign(@elementHeight) {
margin-top: (@navbarHeight - @elementHeight) / 2;
}
// Popover arrows
// -------------------------
// For tipsies and popovers
#popoverArrow {

View File

@ -74,7 +74,7 @@
// Buttons in navbar
.btn,
.btn-group {
margin-top: 5px; // make buttons vertically centered in navbar
.navbarVerticalAlign(30px); // Vertically center in navbar
}
.btn-group .btn {
margin-top: 0; // then undo the margin here so we don't accidentally double it
@ -86,14 +86,15 @@
margin-bottom: 0; // remove default bottom margin
.clearfix();
input,
select {
display: inline-block;
margin-top: 5px;
margin-bottom: 0;
}
select,
.radio,
.checkbox {
margin-top: 5px;
.navbarVerticalAlign(30px); // Vertically center in navbar
}
input,
select {
display: inline-block;
margin-bottom: 0;
}
input[type="image"],
input[type="checkbox"],
@ -114,7 +115,7 @@
.navbar-search {
position: relative;
float: left;
margin-top: 6px;
.navbarVerticalAlign(28px); // Vertically center in navbar
margin-bottom: 0;
.search-query {
padding: 4px 9px;