css - 调整屏幕大小时 Bootstrap 导航栏中断

Question

我的 bootstrap 导航栏在整个笔记本电脑屏幕上看起来不错，但在将其调整到更小的宽度时它会损坏。

这是我的 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 类(class)都可以帮助我吗？我希望导航栏在较小的宽度上响应。

Answer 1

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

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

最好的方法是自定义你的 Bootstrap 文件并将 @grid-float-breakpoint 更改为 850px(或任何你需要的大小，以防万一不是你想要崩溃的点)。您可以从 http://getbootstrap.com/customize/?id=9720390 轻松自定义 bootstrap 3

希望这对您有所帮助。