问题在于,当我缩小屏幕时,条形会分成两排。 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;
}
答案 0 :(得分:0)
在全宽容器中应该没问题。 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>
如果你这样做,则需要更改断点以在内容中断时折叠。