6

在这个 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-->
4

2 回答 2

9

引导程序 5（2021 年更新）

Bootstrap 5 仍然基于 flexbox，因此一行中的列的高度相同。因此 d-block 仍可用于“禁用”弹性盒并用于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 3 这样的 Bootstrap 4 Columns 浮动样式有可能吗？
Bootstrap 4中列之间的空白垂直空间

于 2017-06-22T23:37:30.093 回答
0

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

于 2021-02-15T09:43:37.003 回答