将按钮与带有标签的输入表单对齐 [英] Align button with input forms with labels
本文介绍了将按钮与带有标签的输入表单对齐的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试将按钮元素与其他两个带有标签的输入元素对齐。使用下面的引导代码段:
I'm trying to align a button element with two other input elements with labels. Using the bootstrap snippet below:
<div class="row centered-form center-block ">
<div class="container col-md-6 col-md-offset-3">
<form action="/result" class="form-inline" method="get" role="form">
<div class="row">
<div class="form-group col-md-6">
<label class="control-label" for="County">Prop1, Prop2</label>
<input class="form-control" name="County" type="text" />
</div>
<div class="form-group col-md-4">
<label class="control-label" for="Type">Type of Election</label>
<select class="form-control" name="Type"><option value=""></option>
<option value="1">President</option>
</select>
</div>
<button class="btn btn-primary col-md-2" type="submit">Submit</button>
</div>
</form>
</div>
</div>
我得到的图像如下:
如果我从输入中的两个标签中删除标签,则会得到:
If I remove labels from the two from inputs, I get:
我如何在表单输入中保留标签并仍然将它们与按钮对齐?
How can I leave labels on the form inputs and still align them with the button?
推荐答案
而不是使用不合适的标签,请使用 align-self-end
类(引导程序4 / flexbox )以将按钮垂直对齐到列的底部。
Instead of an improper label, use the align-self-end
class (bootstrap 4 / flexbox) to vertically align the button to the bottom of the column.
<div class="form-group col-md-2 align-self-end">
<button class="btn btn-primary" id="btn" name="btn" type="submit">Submit</button>
</div>
这篇关于将按钮与带有标签的输入表单对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文