引导程序表单组中的多个垂直字段未正确对齐

Question

所以我试图在单个引导程序form-group中对齐不同的字段。我的代码是：

<div class="form-group">
  <div class="col-md-3">
  <label for="abc">Heading1</label>
  <input type="text" id="abc" class="form-control"/>
  </div>

  <div class="col-md-3">
    <label for="xyz">Heading2</label>
    <input type="email" id="xyz" class="form-control"/>
  </div>

</div>

这看起来像：

现在，我真正想要的是我实际上不必显示Heading2，所以我删除了它，它开始看起来像：

如可见，第二个输入框不再与第一个输入框对齐。第二个稍微抬起。

我想要的是即使没有标题标签，这两个盒子也完全对齐。

有任何帮助吗？ 感谢。

P.S：Bootply link

Answer 1

<div class="form-group">
<div class="col-md-3">
<label for="abc">Heading1</label>
<input type="text" id="abc" class="form-control">
</div>

<div class="col-md-3">
<label for="xyz">&nbsp;</label>
<input type="email" id="xyz" class="form-control">
</div>

Answer 2

您可以保留标签（只删除标签中的文字，以便不显示任何内容）以保持正确的间距，或者在第二个输入中添加style="margin-top: 25px"之类的内容，以解释丢失的标签。

Answer 3

为标签提供min-height。

label{
  min-height: 25px;
  display: block;
}

演示：http://www.bootply.com/kMMzFgGN2A

Answer 4

试试这个，

<div class="form-group">
  <div class="col-md-3">
  <label for="abc">Heading1</label><br>
  <input type="text" id="abc" class="form-control"/><br>
  <input type="email" id="xyz" class="form-control"/>
</div>
</div>