css - 为什么我的 Bootstrap 4 容器重叠？

Question

在较小的宽度上，我的 Bootstrap 4 图像容器(JSFiddle 第 28 行)与我的导航容器(JSFiddle 第 16 行)重叠。想知道如何才能阻止这种情况发生。

<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