调整屏幕大小时，引导导航栏中断

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% ;
}

这是全角的样子： 这就是它在调整大小时中断的方式： 我不太喜欢使用像素，只想用 % 来实现！ 任何引导课程都可以在这里帮助我吗？我希望导航栏对较小的宽度做出响应。

Answer 1

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

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

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

希望这会有所帮助。