如何修复此导航栏？

Question

问题在于，当我缩小屏幕时，条形会分成两排。 See image

所以我的问题是如何折叠它们而不是破坏它？

更新： 这是我试过的一个例子： https://getbootstrap.com/examples/navbar-fixed-top/

如果我将字体大小和导航标题放大一点，则会出现问题：

.navbar-brand, .navbar-nav li a {
  line-height: 80px;
  height: 80px;
  padding-top: 0;
  font-size: 16px;
}

Answer 1

在全宽容器中应该没问题。 https://codepen.io/anon/pen/RVVLLe

在正常用例中，您不会像在bootstrap文档中那样在列中使用它。

<div class="col-12 col-md-9 pull-md-3 bd-content">
    <nav class="navbar navbar-inverse bg-inverse">
      <!-- Navbar content -->
    </nav>
</div>

如果你这样做，则需要更改断点以在内容中断时折叠。