html – .form-group中的Bootstrap底部对齐按钮

2023年2月19日 263次阅读

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

这很好但我想在“Field 3”右边有一个按钮,它与输入的底部水平对齐,#f3.

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

> https://v4-alpha.getbootstrap.com/utilities/vertical-align/
> bootstrap-3 align links and buttons at the bottom of a div
> How do I align the button to the bottom of the row/column in bootstrap?

我试过的标记在第4个.form-group中添加了按钮,然后我在上面的链接上尝试了各种各样的东西,例如在相关的div中添加.align-bottom.

<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>

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

最佳答案 这可能有效.在.form-inline中,表单组类与中间对齐,只需将其对齐到底部即可.

<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>
点赞