Блоки одинаковой высоты bootstrap: Как сделать колонки одинаковой высоты в Bootstrap3? — Хабр Q&A

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

Задать вопрос

Вопрос задан 1 год 8 месяцев назад

Изменён 1 год 8 месяцев назад

Просмотрен 196 раз

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

• css
• bootstrap

Если я правильно понял Вашу задачу относительно одинаковой высоты колонок, то просто добавьте 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>
  <div role="group">
    <button type="button">1</button>
    <button type="button">2</button>
    <button type="button">3</button>
  </div>
  <div role="group">
    <button type="button">1</button>
    <button type="button">2</button>
  </div>
</div>

2

.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>
  <div role="group">
    <button type="button">1</button>
    <button type="button">2</button>
    <button type="button">3</button>
  </div>
  <div role="group">
    <button type="button">1</button>
    <button type="button">2</button>
  </div>
</div>

4

Зарегистрируйтесь или войдите

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Как в bootstrap 4 сделать так чтобы блоки растягивались по высоте

Задать вопрос

Вопрос задан 5 лет 3 месяца назад

Изменён 4 года 2 месяца назад

Просмотрен 2k раза

Нужно сделать так что бы в колонке bootstrap был вложенный блок-карточка товара. У блока должны быть границы со всех сторон,внутри col, и он должен тянулся по высоте, в зависимости от контента

Единственное что смог придумать это задать класс со свойством display:flex; col — элементу bootstrap.Но не хочу завязываться на bootstrap классах Подскажите что можно сделать?

.d {
  flex: auto;
  margin-bottom: 10px;
}

.g {
  display: flex;
  flex-flow: row wrap;
  border: 1px solid red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div>
  <div>
    <div>
      fsd
    </div>
  </div>
  <div>
    <div>
      df<br>d
    </div>
  </div>
  <div>
    <div>
      fd
    </div>
  </div>
</div>

• html
• css
• bootstrap
• flexbox

https://jsfiddle. net/scordavis/jz9sgcz5/

<div>
  <div>
    <div>
      fsd
    </div>
  </div>
  ...
</div>

Если не хотите привязываться к BootsTrap-классам — для чего тогда использовать фреймворк?

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — начальная загрузка css делает все столбцы в строке одинаковой высоты

Задавать вопрос

спросил 2 года, 8 месяцев назад

Изменено 2 года, 8 месяцев назад

Просмотрено 8к раз

У меня есть два поля рядом друг с другом, в поле 1 (слева) мало текста, а в поле 2 (справа) много текста:

Как сделать так, чтобы бокс 1 был такой же высоты, как и бокс 2, добавив больше пробелов в бокс 1? Я пытаюсь сделать так, чтобы обе коробки были одинаковой высоты; мой код выглядит так:

 

  <дел>
    
    <дел>
      <дел>
        
        <дел>
  поле 1 данные здесь