调整屏幕大小时，bootstrap navbar正在中断

Question

我的引导程序导航栏在完整的笔记本电脑屏幕上看起来很好，在将其调整为较小的宽度时会断开。

这是我的HTML部分。

<nav role="navigation" class="navbar navbar-default">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">Brand Name</a>
    </div>
    <!-- Collection of nav links, forms, and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">


        <ul class="nav navbar-nav head-nav">
            <li><a href="#">about us</a></li>
            <li><a href="#">our plan</a></li>
            <li><a href="#">visit blog</a></li>
            <li><a href="#">contact us</a></li>
            <li><a href="#">sign in</a></li>
        </ul>
    </div>
</nav>

以下是我的css部分：

ul.nav.navbar-nav.head-nav {
 margin-left: 36%;
}
.head-nav li{
 margin: 0 0 0 0;
 padding: 0 26px;
}

nav.head-nav:last-child {
    margin-right: 0% ;
}

这是它的全宽： 这是它在调整大小时的中断方式： 我不是很喜欢使用像素的人，想用％来实现这个！ 任何bootstrap类都可以帮助我吗？我希望导航栏在较小的宽度上响应。

Answer 1

我最近在网站上遇到了同样的问题。我不知道任何不使用像素屏幕尺寸的解决方案，我认为使用％而不是px是没有意义的。见下文原因。

问题出在navbar崩溃的地步。默认情况下，Bootstrap在768px处折叠。如果你增加这个，你的导航栏会更快崩溃，你的问题就会消失。

执行此操作的最佳方法是自定义引导程序文件并将@grid-float-breakpoint更改为850px（或者您需要的任何大小，以防这不是您想要折叠的点） 。您可以从http://getbootstrap.com/customize/?id=9720390

轻松自定义bootstrap 3

希望这有帮助。