Bootstrap 换行到第二行的列与底部对齐并留有较大间隙。我该如何消除这个差距？

Question

我有一个两排全高容器：

<div class="container-fluid d-flex flex-column h-100">
  <div class="row flex-grow-1">
    <div class="col-auto" style="min-width:200px;height:200px;">
      Some sort of fixed-size logo
    </div>
    <div class="col" style="min-width:500px;max-width:800px">
      <p>Main content that wraps when viewport width is too small.</p>
    </div>
  </div>
  <div class="row">
    <div class="col">
      Footer content
    </div>
  </div>
</div>

当屏幕太窄且第 2 列环绕在第 1 列下方时，为什么第 2 列与底部对齐？

https://jsfiddle.net/t2joybvh/2/

Answer 1

从容器流体中移除 d-flex。它使用全高容器在较小的屏幕上证明内容是合理的。

这是一个在较小屏幕上运行的示例：https://www.codeply.com/p/A6mbqfsMnB

Bootstrap 换行到第二行的列与底部对齐并留有较大间隙。我该如何消除这个差距？

Bootstrap column that wraps to second line aligns to bottom and leaves a large gap. How do I remove this gap?

grid-system

bootstrap-4