在 Bootstrap v4 中为表单组对齐内容底部答案

【问题标题】：Align Contents Bottom for form-group in Bootstrap v4在 Bootstrap v4 中为表单组对齐内容底部
【发布时间】：2018-06-08 22:04:29
【问题描述】：

现在我遇到了标签溢出并环绕的问题，导致输入字段未与 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>

【问题讨论】：

我不明白，如果没有足够的空间，当然会溢出？？ div class="col-md-6" 有一个宽度，如果文本不适合它，它将溢出。你的意思是如何让字体变小？
@SheshankShankar 我知道它会溢出。我的问题是如何将“小时”和它的输入框对齐到底部以便正确排列？因为现在是交错的。
哦，我明白了.. 这更有意义，谢谢
您是否尝试过制作一个表格，第一行作为标签，第二行作为按钮？

标签： javascript twitter-bootstrap forms bootstrap-4

【解决方案1】：

不要使用内部col。将 col-md-6 列的 display 更改为 flex 并将它们的方向更改为列。然后按照你喜欢的方式对齐它们。

d-flex - 将列的显示更改为 flex
flex-column - 将列方向更改为列
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

【讨论】：

嘿@mahan。我今天会检查一下，看看它是如何工作的。如果是这样，那么我会接受这个作为答案。感谢您的回复！