Bootstrap：內聯表單組，標簽在頂部

Question

我有一個正常的表單（Twitter Bootstrap，不是內聯），但是一個輸入字段旁邊有一個按鈕（請參見下圖）。 所有輸入字段的頂部都有一個標簽。

正確的Bootstrap語法是什么（最好不必添加我自己的CSS），以使內聯表單組（輸入字段和旁邊的按鈕）帶有非內聯標簽（即位於輸入字段上方）？

<form>
  <div class="form-group">
    <label for="mobile">Mobile</label>
    <input type="text" class="form-control" />
  </div>
  <div class="row">
    <div class="col-xs-8">
      <div class="form-group">        
        <label for="coupon">Coupon</label> <!-- should behave like the other non-inlined form fields -->
        <input type="text" class="form-control" />
      </div>
    </div>
    <!-- should be inline aligned with the input field -->
    <div class="col-xs-4">
      <button class="btn btn-primary">Apply</button>
    </div>
  </div>  
</form>

Answer 1

您可以使用Bootstrap已經提供的輸入組類。

像這樣：

jsFiddle

---

代碼片段：

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <main class="container"> <form> <div class="form-group"> <label for="mobile">Mobile</label> <input type="text" class="form-control" /> </div> <div class="form-group"> <label for="coupon">Coupon</label> <!-- should behave like the other non-inlined form fields --> <div class="input-group"> <input type="text" class="form-control" /> <span class="input-group-btn"> <button class="btn btn-primary" type="button">Apply</button> </span> </div> </div> </form> 

Answer 2

您可以在按鈕上添加margin-top:24px樣式。 我認為此按鈕最終將在單擊時具有id或其他class來標識它。 從那里在樣式表中創建一個選擇器，然后將其添加到那里，而不是像本示例一樣直接插入。

<button style="margin-top:24px;" class="btn btn-primary">Apply</button>

Answer 3

如果您不希望將其居中放置邊距，則這里有一個jsfiddle 。 您可以向這些div添加另一個類，這樣就不必更改所有默認的引導程序樣式，但這只是向您展示如何做到這一點。

.col-xs-7, .col-xs-4{
  display:inline-block;
  float:none;
}

Answer 4

這是一個可能有用的JSFiddle： https ://jsfiddle.net/DTcHh/23855/

我試圖通過不設置任何固定邊距來實現此目的，以便您可以自由調整按鈕的大小。

因此，通過使用javascript進行對齊，如下所示：

$('.pull-down').each(function() {
    var $this = $(this);
    $this.css('margin-top', $this.parent().height() - $this.height() - 15)
});

由於Bootstrap的默認margin-bottom: 15px為margin-bottom: 15px ，因此添加了數字15 。