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