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

时间:2017-02-20 10:38:47

标签: html css twitter-bootstrap

我有如下标记,它在水平线上显示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>

当然有人希望按钮与表单元素的底部对齐 - 在一条漂亮的直线上 - 是一种常见的场景。那么我做错了什么,我怎样才能实现这个看似简单的任务呢?

2 个答案:

答案 0 :(得分:2)

这可能有用。在.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>

答案 1 :(得分:0)

它很容易覆盖导致换行符的规则,.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;
}

希望它有效