Using Bootstrap 3, I am trying to align adjacent input elements with my label which is intended to be grouped with a checkbox. At the moment, the checkbox and label are displayed a few pixels below the search query box and button. The brand name also appears to be a few pixels higher.
On Bootply: http://www.bootply.com/6tJSBqZ2d5
<div class="container row navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand Name</a>
</div>
<form class="navbar-form navbar-right" id="search-form" method="get" name="search-form">
<div class="input-append">
<input class="form-control" id="query" name="query" placeholder="Search..." value=""> <button class="btn btn-info" type="submit"><span class="glyphicon glyphicon-search"></span></button>
<div class="checkbox">
<h3><span class="label label-default">Refresh
<input type="checkbox"></span></h3>
</div>
</div>
</form>
</div>
What is the proper way to align all elements and have them properly spaced?
The h3
is adding margin-top
and margin-bottom
, and the checkbox element that you have is 8px shorter than the other elements in the header.
So if you add the h3-align
class as shown below to the h3
then it will be aligned:
CSS:
.h3-align {
margin-top: -4px;
margin-bottom: 0px;
}
HTML
<h3 class="h3-align">
<span class="label label-default">Refresh
<input type="checkbox">
</span>
</h3>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.