如何在Bootstrap 3中垂直對齊長標簽

Question

我的輸入旁邊有一個長標簽，它沒有垂直對齊。

是否有一些選項可以像在Bootstrap 2中那樣解決它，好嗎？

 <form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="input1" class="col-lg-2 control-label">Labdas kjas kljas dlkjasd lksjd     el1</label>
    <div class="col-lg-10">
      <input type="text" class="form-control" id="input1" placeholder="Input1">
    </div>
  </div>
  <div class="form-group">
    <label for="input2" class="col-lg-2 control-label">Label2</label>
    <div class="col-lg-10">
      <input type="password" class="form-control" id="input2" placeholder="Input2">
    </div>
  </div>
</form>

Answer 1

不是很干凈...你需要在long標簽上添加一個覆蓋類，比如multiline ，然后像這樣為該類添加一個定義

.control-label.multiline
{
    padding-top:0;
}

Answer 2

這是另一個選項，可能會也可能不會根據您的實現工作。 我已經用它來處理一些我需要'col'類占據行的全高的情況。 從本質上講，它告訴瀏覽器將其解釋為一個表。 這應該允許您將標簽垂直對齊到中間。

我把它放在媒體查詢中，因為它比我為我堆疊的小。

/* addition for displaying bits as tables to gain cell features */
@media (min-width: 769px) {
    .table-display{display:table;  margin:0 -15px; width:100%; }
    .table-display .row, .table-display .form-group{display:table-row;}
    .table-display [class*="col"]{float:none; display:table-cell; vertical-align:middle; padding-left:15px; padding-right:15px;}
}

您可以將表格顯示類添加到表單中： <form class="form-horizontal table-display" role="form">

HTH，-Ted

編輯補充：繼承人是一個小提琴 - http://jsfiddle.net/eAaa3/當然你需要拉伸框架才能拆開它

Answer 3

我有同樣的問題，我用了一張桌子。 如果使用表實現它，您還可以使用.table和.table-responsive類的bootstrap。

Answer 4

這就是我對我的所作所為。 我今天正在使用Bootstrap

.control-label{
   float:left; 
   vertical-align:middle;        
}