Question

我已使用this配置自定义引导程序。我已经设置了

"@grid-float-breakpoint": "810px",
"@grid-float-breakpoint-max": "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

我希望您的问题是由<div class="container">而不是<div class="container-fluid">内的<nav>引起的。

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

Bootstrap 3 Navbar不会在自定义断点处折叠

2 个答案: