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

【问题标题】：How to vertically align long label in Bootstrap 3如何在 Bootstrap 3 中垂直对齐长标签
【发布时间】：2014-03-05 20:47:08
【问题描述】：

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

请问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>

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

不是很干净...您需要向长标签添加一个覆盖类，例如multiline，然后像这样为该类添加一个定义

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

【讨论】：

不幸的是我不能这样做，因为我的表单是由框架自动呈现的。

【解决方案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;}
}

您可以将 table-display 类添加到表单中： <form class="form-horizontal table-display" role="form">

HTH, -泰德

编辑添加：这是一个小提琴-http://jsfiddle.net/eAaa3/ 当然，您需要拉伸框架以将其取消堆叠

【讨论】：

【解决方案3】：

我遇到了同样的问题，我使用了一张桌子。如果你用一个表来实现它，你还可以使用 .table 和 .table-responsive 类的引导程序。

【讨论】：

【解决方案4】：

这就是我的工作。我今天实际上正在使用 Bootstrap

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

【讨论】：