如何在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;        
}