Bootstrap 4 Navbar 在较小的视口上的高度为零答案

【问题标题】：Bootstrap 4 Navbar has zero height on smaller viewportBootstrap 4 Navbar 在较小的视口上的高度为零
【发布时间】：2017-08-10 23:54:33
【问题描述】：

codeply 上的演示链接https://www.codeply.com/go/3HkzkLKpow

以下是 Skelly 制作的一系列导航栏。我复制了 navbar 10 并将其放在第二行。当您调整视口大小以使切换可见时，位置 2 和 11 的导航栏会失去其高度。切换只是可见和可点击的，并在视口中完美地生成一个 div。这是引导程序 4 的问题吗？我知道我可以使用样式表来解决这个问题，但不应该这样做。感谢观看。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

这样做是因为.navbar-toggler-right 绝对位于右侧，这将其从相关容器的流中取出。 .navbar 有填充，这就是为什么仍然部分显示黑条的原因。如果将.container改为容器流体，将.navbar-toggler-right相对定位并向右浮动，菜单将被放置在相同的位置，但不会隐藏栏。

【讨论】：

感谢您的输入，但为什么所有其他导航栏都可以在没有额外编码的情况下工作，而这却不行？当然，这应该在 Bootstrap 提供的 css 中处理
拥有它的是.navbar-toggler-right 类。如果你不想要它，就把它拿下来。将.pull-right 类添加到其中，它会产生类似的效果。示例其余部分中的其他内容实际上是相同的方式，但它们在导航中包含品牌，这使其保持适当的高度，因为品牌仍在页面流中。
谢谢 - 取出 .navbar-toggler-right 并添加了 pull right，效果很好。需要离开并仔细研究所有这些定位元素是如何组合在一起的。