Выровнять содержимое нижней части группы форм в 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