1

Использую 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>

2 ответа 2

1

Если я правильно понял Вашу задачу относительно одинаковой высоты колонок, то просто добавьте 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>

2
  • ой, точно. Не заметил, что надо растянуть 23 мар 2021 в 7:49
  • @МихаилКамахин, ну и раз уж используется бутстрап, то писать свой css практически нет необходимости - почти всё есть в классах 23 мар 2021 в 7:50
0

.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>

4
  • Салам...подскажи какой шрифт используется ? 23 мар 2021 в 7:42
  • 1
    @MaximLensky system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" вот такое. Какой именно не знаю. Шрифты тут заданы CSS переменной. Я посмотрел это в Firefox, во вкладке вычислено. Или Computed вкладка в chrome, но в хроме не так удобно 23 мар 2021 в 7:46
  • получается берётся из системы ? 23 мар 2021 в 7:47
  • @MaximLensky не могу быть в этом уверенным, надо к пустой странице подсоединить этот bootstrap CSS и посмотреть на вкладу Network, куда идут запросы, возможно, где-то могут подключить шрифты, но это не точно 23 мар 2021 в 7:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.