使用Bootstrap 3,我试图将相邻的输入元素与我的标签对齐,该标签旨在与复选框分组。目前,复选框和标签显示在搜索查询框和按钮下方几个像素处。品牌名称似乎也高出几个像素。
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>
对齐所有元素并使它们间隔适当的正确方法是什么?
答案 0 :(得分:2)
h3
正在添加margin-top
和margin-bottom
,您拥有的复选框元素比标题中的其他元素短8px。
因此,如果您将h3-align
类添加到h3
,如下所示,那么它将会对齐:
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>
<强> Bootply example 强>