Почему мои контейнеры Boostrap 4 перекрываются?

Question

При меньшей ширине мой контейнер Bootstrap 4 для изображения (строка 28 JSFiddle) перекрывает мой контейнер для навигации (строка 16 JSFiddle). Хотите знать, как я могу предотвратить это?

<div class="container" style="">
  <hr style="width:80%">
  <nav class="custom-navbar">
    <a href="/">Home</a>
    <a href="/architecture/">Architecture</a>
    <a href="/product/">Product</a>
    <a href="/portraits/">Portraits</a>
    <a href="/wildlife/">Wildlife</a>
    <a href="/about/">About</a>
  </nav>
</div>

<div class="container">
  <img class="" src="https://www.rishulbangar.com/img/baan-thai-cover.jpg">
</div>

JSFiddle- https://jsfiddle.net/AakLak/npegafkw/5/

Answer 1

Ваша проблема в том, что определение класса custom-navbar имеет фиксированную высоту:

.custom-navbar {
  margin-bottom: 1em;
  height: 60px;
}

Поэтому, когда ссылки должны распределяться по двум строкам, возникает переполнение.Решением этой проблемы будет просто удаление фиксированной высоты, вы можете проверить исправление здесь:

JS-Fiddle