將複選框與標籤和其他輸入元素對齊

使用引導程序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>

什麼是使所有元素，並讓他們適當間隔的正確方法？

來源

2014-07-08 Brian

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

來源

2014-07-08 21:34:48 Dan

涼，謝謝。我將如何使h3標籤與搜索按鈕的大小相同？ – Brian

@staticx您可以將'padding-top'和'padding-bottom'添加到標籤，如下所示：http://www.bootply.com/UZ7UIuJPBh – Dan

將複選框與標籤和其他輸入元素對齊

回答

相關問題