Выровнять высоту кнопок в колонках на Bootstrap 4

Question

Использую Bootstrap 4. Есть несколько (для примера пусть будет 2) колонок кнопок, количество кнопок в колонках разное, может меняться. Как можно выровнять высоты кнопок так, чтобы колонки были одинаковой высоты?

<div className="btn-group-vertical mt-4 mb-4" role="column">
    <button type="button" className="btn btn-outline-secondary bg-dark">1</button>
    <button type="button" className="btn btn-outline-secondary bg-dark">2</button>
    <button type="button" className="btn btn-outline-secondary bg-dark">3</button>
</div>
<div className="btn-group-vertical mt-4 mb-4" role="column">
    <button type="button" className="btn btn-outline-secondary bg-dark">1</button>
    <button type="button" className="btn btn-outline-secondary bg-dark">2</button>
</div>

Answer 1

.btn-group-container {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<div class="btn-group-container">
  <div class="btn-group-vertical" role="group">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
  </div>
  <div class="btn-group-vertical" role="group">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
  </div>
</div>

Answer 2

Если я правильно понял Вашу задачу относительно одинаковой высоты колонок, то просто добавьте btn-group-container класс d-flex:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<div class="btn-group-container d-flex">
  <div class="btn-group-vertical my-4" role="group">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
  </div>
  <div class="btn-group-vertical my-4" role="group">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
  </div>
</div>

БЛОГ НА HUSL

Выровнять высоту кнопок в колонках на Bootstrap 4

Ответы (2 шт):