在 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