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>

这样可以正常工作，但我想在＆＃34; Field 3＆＃34;右边按一个按钮。它与输入的底部#f3水平对齐。

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

我尝试过的标记在第4个.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>

Answer 2

它很容易覆盖导致换行符的规则，.form-inline的行为就是这样，因为bootstrap中有以下代码：

.form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}

尝试这样做。

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

.form-group.reset-button{
display:block;
}

希望它有效

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

2 个答案: