在Bootstrap v4中为form-group对齐内容底部

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>

- drewkiimon

---

我不明白，如果空间不够，当然会溢出吧？div class="col-md-6"有一个宽度，如果文本无法适应它，它就会溢出。你是指如何使字体大小变小吗？ - Sheshank S.

@SheshankShankar 我明白它会溢出。我的问题是如何将“小时”及其输入框对齐到底部，以便正确对齐？因为现在它是错开的。 - drewkiimon

哦，我明白了...这样就更有意义了，谢谢。 - Sheshank S.

你尝试过用第一行作为标签，第二行作为按钮来制作表格吗？ - Sheshank S.

Answer 1

不要使用内部的col。将col-md-6列的display更改为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

- mahan

---

嘿 @mahan。我今天会检查一下这个，看看它是如何工作的。如果可以的话，我会接受这个作为答案。谢谢你的回复！ - drewkiimon