將復選框與標簽和其他輸入元素對齊

Question

使用Bootstrap 3，我試圖將相鄰的輸入元素與我的標簽對齊，該標簽旨在與一個復選框分組。 目前，復選框和標簽顯示在搜索查詢框和按鈕下方幾像素處。 品牌名稱似乎也高出幾個像素。

在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>

對齊所有元素並使它們正確隔開的正確方法是什么？

Answer 1

h3添加margin-top和margin-bottom ，並且您擁有的checkbox元素比標題中的其他元素短8px。

因此，如果h3-align如下所示的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>

引導示例