引导程序3导航栏未在自定义断点处折叠

Question

我用这个配置定制了引导程序。我已设置

"@grid-float-breakpoint": "810px",
"@grid-float-breakpoint-max": "800px"

然而，导航栏似乎并没有在800px或任何接近800px的地方崩溃。导航栏在600-650px左右坍塌。我做错了什么。我还需要更改其他值吗？

导航栏

<nav id="navbar" class="navbar navbar-default navbar-fixed-top" role="navigation" data-selected="#new-li">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
            </span>
        </button>
        <a class="navbar-brand" href="#"><img src="/C5.WebApp/Content/logo.png" alt="logo"></a>
    </div>
    <div class="navbar-collapse collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav navbar-right">
            <li id="inbox-li"><a href="/C5.WebApp/">Posteingang</a></li>
            <li id="tasks-li"><a href="/C5.WebApp/Tasks">Aufgaben</a></li>
            <li id="calendar-li"><a href="/C5.WebApp/Calendar">Kalender</a></li>
            <li id="contacts-li"><a href="/C5.WebApp/Contacts">Kontakte</a></li>
            <li class="active" id="new-li"><a href="/C5.WebApp/Activity/Create">Neue Aktivität</a></li>
            <li><a href="/C5.WebApp/Login/Logout">Abmelden</a></li>
        </ul>
    </div>
</div>

Answer 1

检查您的bootstrap.css文件（未缩小），从第3911行开始，您应该会看到以下代码。。。确保min-width: 810px正确。

@media (min-width: 810px)
  .navbar-toggle {
    display: none;
  }
}

如果这是正确的，那么您可能有一些自定义CSS覆盖了断点，或者您的HTML文件中没有链接正确的CSS文件。

Answer 2

我认为您的问题是由在<nav>中使用<div class="container">而不是<div class="container-fluid">引起的。

在断点设置为768px（等于xs网格的最大大小）的默认情况下，由于.container类对于768px以下的屏幕宽度没有固定宽度（网格是流动的），因此不会出现问题。在768以上的.container类将宽度设置为750px；。对于800px附近的新断点，sm网格中.container类的固定宽度将导致您的问题。container-fluid类没有设置固定的宽度。