Bootstrap - я не хочу, чтобы столбцы имели одинаковую высоту

В этом примере начальной загрузки 4 2 столбца имеют одинаковую высоту. Я не хочу это. Есть ли быстрое решение для этого?

    <div class="col-lg-3 card bg-faded">
      <h1><small>Some favorites</small></h1>
      <ul>
        <li>Celery root</li>
        <li>Spaghetti Squash</li>
        <li>Killer Mushrooms</li>
      </ul>
    </div>

    <div class="col-lg-9">
      <h1>Wild & Wicky Vegetables</h1>
      <p>Kale c.....t.</p>
    </div>
</div><!--row-->

twitter-bootstrap bootstrap-4 bootstrap-5
person Mohammed Ait    schedule 22.06.2017    source источник

Ответы (2)


arrow_upward
8
arrow_downward

Bootstrap 5 (обновление 2021 г.)

Bootstrap 5 по-прежнему основан на flexbox, поэтому столбцы в строке имеют одинаковую высоту. Поэтому d-block по-прежнему можно использовать для отключения flexbox и использования float-start для плавающих столбцов.

Bootstrap 4 (исходный ответ)

Да, вы можете использовать d-block в строке и float-left в столбцах, чтобы он работал как Bootstrap 3.x с плавающими столбцами вместо flexbox.

<div class="row d-block">
    <div class="col-lg-3 float-left">
        ..
    </div>
    <div class="col-lg-9 float-left">
        ..
    </div>
</div>

https://codeply.com/go/Ghhq1NbMDG

Связанный:
Bootstrap 4 Columns float style как Bootstrap 3, это возможно?
Пустой вертикальный пробел между столбцами в Bootstrap 4

person Zim    schedule 22.06.2017

arrow_upward
0
arrow_downward

На самом деле, более простым решением является добавление класса «h-100» к столбцу, с которым вы не хотите иметь одинаковую высоту. Это делает столбец высотой 100%, не разделяя высоту другого столбца в строке.

person Phil Owen    schedule 15.02.2021