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

我的引导导航条在笔记本电脑的全屏幕上看起来不错，只要将其调整到更小的宽度，它就会断开

这是我的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>

这是它的全宽外观： 这就是它在调整大小时的中断方式： 我不太喜欢使用像素，只想用%来实现这一点！

---

有什么引导类可以帮助我吗？我希望导航栏在较小的宽度上响应

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

问题在于

导航栏

折叠的点。默认情况下，引导在

768px

处折叠。如果你增加这个，你的导航栏会很快崩溃，你的问题也会消失

最好的方法是自定义引导文件，并将

@grid float breakpoint

更改为

850px

（或者您需要的任何大小，以防这不是您要折叠的点）。您可以从中轻松自定义引导3

---

希望这能有所帮助。

您可以使用符合响应断点的引导类，也可以编写自己的CSS，在每个断点处根据自己的喜好更改菜单。无论哪种方法我都可以。但我更愿意参加引导课程。如果这是负担不起的，那么将与自定义CSS！您是否包含bootstrap.js？您的导航没有折叠，我已经包括在内，它会折叠，但在压缩到768px以下后。。但在770-850px之后，它会像我上面发布的那样分成多行。是的，这是可以做到的。否则，我们可以编写媒体查询并正确调整内容大小。我查看了引导代码，如果您想自己更改，大约有100行代码需要更改。我认为自定义引导是最好的方法。是的，确实如此。根据屏幕大小，我正在编写自己的媒体查询，以重置我的组件的大小，它也可以工作。

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