无法将按钮与水平形式对齐（非内联）（Bootstrap）

Question

在下面的代码中，我有 2 个按钮和 3 个带标签的输入。我希望按钮与输入对齐，但它们与标签对齐。我尝试过内联表单，但将标签放在侧面是行不通的。

在不过度破坏引导程序的情况下完成此任务的最佳选择是什么？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</script>

<form role="form">
  <div class="row">
    <div class="form-group col-xs-1">
      <button type="button" class="btn btn-success btn-add">+</button>
    </div>
    <div class="form-group col-xs-3">
      <label>Text Input</label>
      <input class="form-control">
      <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="form-group col-xs-3">
      <label>Text Input</label>
      <input class="form-control">
      <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="form-group col-xs-3">
      <label>Text Input</label>
      <input class="form-control">
      <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="form-group col-xs-2">
      <button type="submit" class="btn btn-default">Filter</button>
    </div>
</form>

Answer 1

由于您正在使用 bootstrap，因此您可能不想过多地自定义 CSS，除非您真的知道自己在做什么。

因此，尝试具有相同的结构，然后您将得到相同的结果，将<label>&nbsp;</label>这些按钮添加为占位符，以便它们的行为与屏幕更改相同。

还添加form-control到提交按钮并让 bootstrap 处理它：D

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<form role="form">
  <div class="row">
    <div class="form-group col-xs-1">
      <label>&nbsp;</label>
      <button type="button" class="btn btn-success btn-add">+</button>
    </div>
    <div class="form-group col-xs-3">
      <label>Text Input</label>
      <input class="form-control">
      <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="form-group col-xs-3">
      <label>Text Input</label>
      <input class="form-control">
      <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="form-group col-xs-3">
      <label>Text Input</label>
      <input class="form-control">
      <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="form-group col-xs-2">
      <label>&nbsp;</label>
      <button type="button" class="btn btn-default form-control">Filter</button>
    </div>
  </div>
</form>