为什么我的Boostrap 4容器重叠？

Question

在较小的宽度上，我用于图像的Bootstrap 4容器（JSF中线28）与我的导航容器（JSF中线16）重叠。 想知道如何才能阻止这种情况的发生。

DataSource

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

Answer 1

您的问题是custom-navbar类定义的高度固定：

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

因此，当链接必须分布在两行上时，会发生溢出。解决此问题的方法是仅除去固定高度，您可以在此处检查此固定高度：

JS-Fiddle