在Bootstrap v4中将表单组的内容对齐底部

Question

现在我遇到的问题是我的标签溢出并环绕，使输入字段不对齐div的底部。是否有一种简单的CSS方法可以做到这一点？

我尝试了相对/绝对位置，显示内联块+垂直对齐底部等。

非常感谢任何提示/帮助！11！1

<div class="form-row m-0">
<div class="col-md-6 p-0">
    <div class="col bg-success form-group p-2 m-0 h-100"><label for="theHours"><b>Hours</b></label><input class="form-control" type="text" id="theHours" aria-describedby="hoursHelp"></div>
</div>
<div class="col-md-6 p-0">
    <div class="col bg-success form-group p-2 m-0 h-100"><label for="theOrder"><b>Work Order / Notification / Emergency</b></label><input class="form-control" type="text" id="theOrder" aria-describedby="orderHelp"></div>
</div>

Answer 1

不要使用内部col。将display列的col-md-6更改为 flex ，将其方向更改为列。然后根据自己的喜好调整它们。

1. d-flex - 将列的显示更改为flex
2. flex-column - 将列的方向更改为列
3. justify-content-end - 在结尾处对齐列的内容。您也可以使用 justify-content-between 。

我使用col-6代替col-md-6，因为col-md-6的屏幕尺寸仅大于≥768px。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="form-row m-0">
  <div class="col-6 bg-success form-group p-2 m-0 d-flex flex-column justify-content-end">
    <label for="theHours"><b>Hours</b></label>
    <input class="form-control" type="text" id="theHours" aria-describedby="hoursHelp">
  </div>
  <div class="col-6 p-0 bg-success form-group p-2 m-0 d-flex flex-column justify-content-end">
    <label for="theOrder"><b>Work Order / Notification / Emergency</b></label>
    <input class="form-control" type="text" id="theOrder" aria-describedby="orderHelp">
  </div>
</div>

https://codepen.io/anon/pen/xzgZXa