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

Css 引导3导航栏未在自定义断点处折叠,css,twitter-bootstrap,twitter-bootstrap-3,navbar,Css,Twitter Bootstrap,Twitter Bootstrap 3,Navbar,我用config定制了引导。我已经准备好了 "@grid-float-breakpoint": "810px", "@grid-float-breakpoint-max": "800px" 然而,导航栏似乎并没有在800px或接近800px的速度下崩溃。导航条在大约600-650px时崩溃。我做错了什么。我是否也必须更改任何其他值 导航栏 <nav id="navbar" class="navbar navbar-default navbar-fixed-top" role="navig

我用config定制了引导。我已经准备好了

"@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>
检查bootstrap.css文件是否未缩小,从第3911行开始,您应该会看到以下代码。。。确保最小宽度:810px正确

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

如果这是正确的,那么您要么有一些自定义CSS覆盖断点,要么没有在HTML文件中链接正确的CSS文件

我认为您的问题是由使用而不是内部引起的


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

我尝试了与您相同的变量,它对我来说工作正常。我认为你需要提供更多的细节。在浏览器中,检查.navbar切换按钮,查看媒体查询的最小宽度设置为多少。@Schmalzy我没有找到Toogle的最小宽度属性。将容器更改为流体也不起作用