Положение кнопки в среднем ряду на встроенной форме Bootstrap 4

Question

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

<form role="form"  id="form_tambah_kriteria" class="margin-bottom-0">
    <div class="form-row">
        <div class="form-group col-md-4">
            <label>Tipe Decision Maker</label>
            <div class="input-group">
                <div class="input-group-append"><span class="input-group-text"><i class="ion-ios-contacts"></i></span></div>
                <input type="text" name="tipe_dm[]" class="form-control" placeholder="Tipe Decision Maker">
            </div>
        </div>
        <div class="form-group col-md-4">
            <label>Owned by:</label>
            <div class="input-group">
                <select class="form-control" name="owner_dm">
                    <option value="">0</option>
                    <option value="1">1</option>
                    </select>
            </div>
        </div>
        <button class="btn btn-danger">Delete</button>
    </div>
</form>

Ниже указано Codepen

Answer 1

Вы должны поместить кнопку в сетку третьего столбца и использовать <br />. Вы должны сделать это, как показано ниже:

<div class="form-group col-md-4">
  <br />
  <button class="btn btn-danger">Delete</button>
</div>

Answer 2

Простое исправление заключается в том, чтобы обернуть кнопку в form-group и добавить к ней невидимый текст (  или <br />). Но это было бы совершенно неправильно, просто удобный хак, потому что это просто скрыло бы основную проблему с вашим кодом.

Правильное решение было бы:

• использовать последняя стабильная версия Bootstrap - ваше перо в настоящее время использует v4.0.0-alpha5, который не содержит много исправлений и, среди прочего, не содержит классов flexbox Bootstrap)
• заключает кнопку в .form-group.col-md-4
• использование d-flex align-items-end классов в .form-row

Рабочий пример: https://codepen.io/andrei-gheorghiu/pen/KKKNxZg

---

Примечание: пока вы не начнете использовать последнюю стабильную версиюверсия CSS Bootstrap, вы продолжите сталкиваться с проблемами, которые, по-видимому, не имеют никакого смысла, потому что версия, которую вы используете, является предварительной версией, которая не включает в себя многое из того, что большинство примеров Bootstrap 4 считают само собой разумеющимся.

Answer 3

решение легко, просто добавьте <br> перед кнопкой Delete для новой строки ... вот так:

<br> <button class="btn btn-danger">Delete</button>