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

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

是的，你可以在行上使用d-block，在列上使用float-left，使其使用浮动列而不是flexbox的Bootstrap 3.x方式。

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

https://www.codeply.com/go/Ghhq1NbMDG

相关：
Bootstrap 4 Columns float style like Bootstrap 3 is it possible?
Empty vertical space between columns in Bootstrap 4

Answer 2

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