Bootstrap响应列高度

Question

我正在使用引导程序4并尝试创建布局。我遇到的问题是响应式的。

当页面尺寸变小时，我希望右侧导航位于左侧导航下方。我遇到的问题是主体的运行时间比左侧导航的时间长。右中殿始终位于主体下方，是否有办法将其强迫在左中殿下方而又没有空隙？

<div class="container-fluid">
    <div class="row pt-5 pl-3 pr-3">
        <div id="left-nav" class="d-none d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2">
            ...
        </div>
        <div id="main-body" class="col-12 col-sm-12 col-md-8 col-lg-9 col-xl-8">
            ...
        </div>
        <div id="right-nav" class="d-none d-sm-none d-md-block col-md-3 col-lg-3 col-xl-2">
            ...
        </div>
    </div>

    <section id="footer" class="footer">
        <div class="container">
            <div class="row">
            </div>
        </div>
    </div>
</div>

Answer 1

由于Bootstrap 4使用flexbox，因此行上的cols始终等于相等高度（由最高高度设置）。

您可以通过使用d-(breakpoint)-block上的row在某些断点“禁用” Flexbox来解决此问题。通过将行display:block改为display:flex，现在可以使用浮点数将cols左右浮动。

<div class="container-fluid">
  <div class="row pt-5 d-md-block d-xl-flex">
    <div id="left-nav" class="d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2 border float-left">
      left
    </div>
    <div id="main-body" class="col-md-8 col-lg-9 col-xl-8 border taller float-right">
      main
    </div>
    <div id="right-nav" class="d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2 border">
      right
    </div>
  </div>
</div>

演示：https://www.codeply.com/go/A0oYUlPOud

相关：
How to fix unexpected column order in bootstrap 4?
How to make this column ignore the vertical space