.form-group 内的 Bootstrap 底部对齐按钮

Question

我有如下标记，在水平线上显示 3 个文本输入

<div class="form-inline">
    <div class="form-group">
        <label>Field 1</label>
        <input id="f1">    
    </div>

    <div class="form-group">
        <label>Field 2</label> 
        <input id="f2">
    </div>

    <div class="form-group">
        <label>Field 3</label>
        <input id="f3">
    </div>
</div>

这工作正常，但我想要一个位于“字段 3”右侧的按钮，该按钮与输入的底部水平对齐#f3。

我查看了以下内容，但这些似乎都不起作用：

• https://v4-alpha.getbootstrap.com/utilities/vertical-align/
• bootstrap-3 对齐 div 底部的链接和按钮
• 如何在引导程序中将按钮与行/列的底部对齐？

我尝试过的标记在第四个中添加了按钮.form-group，然后我在上面的链接上尝试了各种方法，例如添加.align-bottom到相关的 div。

<div class="form-inline">
    <div class="form-group">
        <label>Field 1</label>
        <input id="f1">    
    </div>

    <div class="form-group">
        <label>Field 2</label> 
        <input id="f2">
    </div>

    <div class="form-group">
        <label>Field 3</label>
        <input id="f3">
    </div>

    <div class="form-group align-bottom">
        <input type="reset" value="Reset" class="align-bottom">
    </div>
</div>

肯定有人希望按钮与表单元素的底部对齐 - 以一条漂亮的直线 - 是一种常见的情况。那么我做错了什么，我怎样才能完成这个看似简单的任务呢？

Answer 1

这可能有效。在 中.form-inline， form-group类与中间对齐，只需简单地将其与底部对齐即可。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
label{
  display:block;
}
.form-inline .form-group {
  vertical-align:bottom;
}
</style>
<div class="form-inline">
  <div class="form-group">
    <label>Field 1</label>
    <input id="f1">
  </div>

  <div class="form-group">
    <label>Field 2</label>
    <input id="f2">
  </div>

  <div class="form-group">
    <label>Field 3</label>
    <input id="f3">
  </div>

  <div class="form-group align-bottom">
    <input type="reset" value="Reset" class="align-bottom">
  </div>
</div>