Bootstrap-表單控件輸入的同一行中的按鈕

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

使用flexbox行上的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>

另外，注意-xs在Bootstrap 4中不再存在。

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

Answer 2

將最后一列設置為flexbox，然后將項目對齊到末尾。 使用bootstrap將d-flex align-items-end類添加到包含列的按鈕。