Question

我的输入旁边有一个长标签，它没有垂直对齐。

是否有一些选项可以解决它like it was in 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

不是很干净......您需要在长标签上添加覆盖类，例如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类引导程序。

Answer 4

这就是我对我的所作所为。我今天正在使用Bootstrap

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

如何在Bootstrap 3中垂直对齐长标签

4 个答案: