Bootstrap 4 кнопки в выравнивании строк

Question

У меня есть две кнопки в ряду начальной загрузки 4, которые отказываются выравнивать по вертикали.Я хочу выровнять дно с входами в той же строке.

Скрипка здесь .

Код:

<div class="container">
<div class="card-header">SEIZED BY</div>
<div class="card-body d-flex flex-column">
    <div class="row form-group">
        <div class="col-md-2">
            <label class="control-label control-label-left" for="OC">O/C</label>
            <input id="OC" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-3">
            <label class="control-label control-label-left" for="SeizedByName">Name</label>
            <input id="SeizedByName" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-5">
            <label class="control-label control-label-left">Station</label>
            <input type="text" class="form-control typeahead" name="query" id="query" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
        </div>
        <div class="col-md-2">
            <button type="button" class="mt-auto btn btn-primary align-item-centre" data-toggle="modal" data-target="#signature">
                Signature
            </button>
        </div>
    </div>
    <br>
    <div class="row form-group">
        <div class="col-md-2">
            <label class="control-label control-label-left" for="OC">Witness</label>
            <input id="Witness" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-3">
            <label class="control-label control-label-left" for="SeizedByName">Name</label>
            <input id="WitnessName" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-5">
            <label class="control-label control-label-left">Station</label>
            <input type="text" class="form-control typeahead" name="query" id="query1" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signature">
                Witness Signature
            </button>
        </div>
    </div>
</div>

Я пытался добавить mt-auto к элементу <button> в соответствии с этим ответом переполнения стека , но это не дает видимого эффекта.

d-flex и flex-column уже добавлены в тело карты.

Я хотел бы, чтобы решение использовало вспомогательные утилиты начальной загрузки.Кнопки также касаются входов на маленьких экранах.

Answer 1

Возможно, вы можете использовать этот код align-items-end в каждой группе form-group:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="container">
<div class="card-header">SEIZED BY</div>
<div class="card-body d-flex flex-column">
    <div class="row form-group  align-items-end">
        <div class="col-md-2">
            <label class="control-label control-label-left" for="OC">O/C</label>
            <input id="OC" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-3">
            <label class="control-label control-label-left" for="SeizedByName">Name</label>
            <input id="SeizedByName" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-5">
            <label class="control-label control-label-left">Station</label>
            <input type="text" class="form-control typeahead" name="query" id="query" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
        </div>
        <div class="col-md-2 ">
            <button type="button" class="mt-auto btn btn-primary align-item-centre" data-toggle="modal" data-target="#signature">
                Signature
            </button>
        </div>
    </div>
    <br>
    <div class="row form-group align-items-end">
        <div class="col-md-2">
            <label class="control-label control-label-left" for="OCQID">Witness</label>
            <input id="Witness" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-3">
            <label class="control-label control-label-left" for="SeizedByName">Name</label>
            <input id="WitnessName" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-5">
            <label class="control-label control-label-left">Station</label>
            <input type="text" class="form-control typeahead" name="query" id="query1" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signature">
                Witness Signature
            </button>
        </div>
    </div>
</div>

и результат:

Answer 2

Вы можете использовать .align-items-baseline после использования .flex row.