html - Bootstrap 表单组中的多个垂直字段未正确对齐

Question

所以我试图在单个 Bootstrap 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，所以我将其删除，它开始看起来像这样:

可见，第二个输入框不再与第一个输入框对齐。第二个略微凸起。

我想要的是即使没有标题标签，这两个框也能完美对齐。

有什么帮助吗？谢谢。

附言: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>