Bootstrap Отзывчивый Высота Колонок

Question

Я использую bootstrap 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, столбцы в строке всегда будут равны равной высоте (устанавливается по высоте самого высокого).

Вы можете обойти это, "отключив" flexbox в определенных точках останова, используя d-(breakpoint)-block на row. Сделав строку display:block вместо display:flex, теперь можно использовать поплавки для перемещения столбцов вправо или влево.

<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

Связанный:
Как исправить неожиданный порядок столбцов в начальной загрузке 4?
Как заставить этот столбец игнорировать вертикальное пространство