Bootstrap - 我不希望列具有相同的高度

Question

在此 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-->

Answer 1

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

---

相关：

Answer 2

实际上，一个更简单的解决方案是将 'h-100' class 添加到您不想与其共享相同高度的列。这使得该列本身的高度为 100%，而不共享该行中其他列的高度。