引导 - 表单控件输入同一行中的按钮

Question

我想使按钮与以前的表单控件中的输入文本保持在同一行上。

<div class="row">
<div class="form-group col-xs-6 col-md-5 ">
<label for="">Name</label>
<input class="form-control " type="text" >
</div>
<div class="form-group col-xs-6 col-md-5 ">
<label for="">E-mail</label>
<input class="form-control " type="text" ">
</div>
<div class="form-group col-xs-6 col-md-2">
<button class="btn btn-primary">Save</button>
</div>
</div>

检查这个小提琴，看看它是怎么回事： 小提琴

我试图在按钮标签上方放置一个"标签"。但我不认为这是更好和正确的方法。

Answer 1

在弹性框行上使用align-items-end，使按钮与输入一起在底部对齐...

<div class="container">
<div class="row align-items-end">
<div class="form-group col-5 col-md-5 ">
<label for="">Name</label>
<input class="form-control " type="text" id="inputHrDiariamaxima">
</div>
<div class="form-group col-5 col-md-5 ">
<label for="">E-mail:</label>
<input class="form-control " type="text" id="inputKmDiariamaxima">
</div>
<div class="form-group col-6 col-md-2">
<button class="btn btn-primary">Salvar</button>
</div>
</div>
</div>

另请注意-xsBootstrap 4 中不再存在。

演示：https://jsfiddle.net/xLc28pg5/

Answer 2

将最后一列设为弹性框，并将项目对齐到末尾。使用引导程序将类d-flex align-items-end添加到包含列的按钮。