Javascript 引导导航栏折叠问题

我已经根据in Bootstrap中给出的示例编写了一个导航栏。但导航栏并没有按预期的方式正确折叠。如下流程所示：

国家1

国家2

国家3

导航栏不会急剧折叠，而是先变成两列，然后折叠

我发现了一个以前在中被问到的问题。问题似乎是由引导中定义的默认断点引起的。然而，我不知道在哪里改变断点，以及如何改变断点

我使用的是最新的引导版本，下面是我的导航条形码片段

提前感谢您的帮助和建议

<!--navigation bar-->
    <nav class="navbar navbar-inverse navbar-fixed-top">

        <div class="container">

            <div class="navbar-header"><!--brand and toggle get grouped for better mobile display-->

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navItems">

                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>

                </button>

                <a class="navbar-brand" href="#">Logo</a><!--end of logo-->

            </div><!--end of logo & collapsing logic-->

            <div class="collapse navbar-collapse" id="navItems">

                <ul class="nav navbar-nav">

                    <li><a href="#main" class="scroll">HOME</a></li>

                    <li><a href="#about" class="scroll">ABOUT</a></li>

                    <li><a href="#work" class="scroll">WORK</a></li>

                    <li><a href="#blog" class="scroll">BLOG</a></li>

                    <li><a href="#contact" class="scroll">CONTACT</a></li>

                </ul><!--end of menu list-->

                <form class="navbar-form navbar-left">

                    <input type="text" class="form-control" placeholder="Search on this site" id="searchInput ">

                    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></button>

                </form><!--end of search bar-->

                <ul class="nav navbar-nav navbar-right">

                    <li class="dropdown">

                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-user"></span> My Account <span class="caret"></span></a>

                        <ul class="dropdown-menu" role="menu">

                            <li><a href="#"><span class="glyphicon glyphicon-wrench"></span> Settings</a></li>

                            <li><a href="#"><span class="glyphicon glyphicon-refresh"></span> Update Profile</a></li>

                            <li class="divider"></li>

                            <li><a href="#"><span class="glyphicon glyphicon-off"></span> Sign Out</a></li>

                        </ul><!--end of sub menu-->

                    </li><!--end of dropdown menu-->

                </ul><!end of the user account menu-->

            </div><!--end of collpased nav-->

        </div><!--end of container-->

    </nav><!--end of navbar-->

---

我试图修改定义的最小宽度，但是我改变了，它就是不起作用。

我终于找到了答案：

要在最新版本中执行此操作，请执行以下操作：

我修改了css文件中的三个部分：

首先，您需要设置在1000px的情况下导航栏标题向左浮动的时间：

@media (min-width: 1000px) {
  .navbar-header {
    float: left;
  }
}

然后，您需要确定所有菜单按钮何时消失：

@media (min-width: 1000px) {
  .navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
    visibility: visible !important;
  }
  .navbar-collapse.in {
    overflow-y: visible;
  }
  .navbar-fixed-top .navbar-collapse,
  .navbar-static-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    padding-right: 0;
    padding-left: 0;
  }
}

最后，您需要定义导航栏切换何时生效：

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

然后等待奇迹的发生：

当屏幕达到1000px阈值时：

从

到

---

看起来您应该能够像这样覆盖默认的导航栏折叠点。。假设新折叠点中有1000个像素：

@media (max-width: 1000px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

演示：

我建议安装混音器，这样混音器就可以分离，更易于管理

使用此配置，断点位于_变量mixin中，_navbarmixin在默认情况下仅拾取变量

---

覆盖将起作用，但如果您与引导混合保持一致，可能会更整洁。

阅读您自己链接到的文档

由于引导程序不知道navbar中的内容需要多少空间，因此在将内容包装到第二行时可能会遇到问题。要解决此问题，您可以：

减少导航栏项目的数量或宽度。 使用响应实用程序类以特定屏幕大小隐藏某些导航栏项目。 更改导航栏在折叠模式和水平模式之间切换的点。自定义@grid float breakpoint变量或添加您自己的媒体查询。

---

可能重复-非常感谢，我将首先尝试。如果这解决了问题，我将更新解决方案。这似乎在Bootstrap 3上不起作用，因为还有另一个规则navbar-collapse.collapse，它有display:block！重要的禁用该选项将导致折叠按钮不出现。。。许多需要重新定义的类，而不仅仅是@Daniele Riccit所说的崩溃。这可能应该作为注释而不是答案来编写，因为这实际上并没有回答最初的问题。这是一个有效的观点，但是一个不完整的答案；即使你能找到一个预编译的引导CSS，断点值也是在_变量mixin中编译的，所以对我来说知道这个值从哪里来是很重要的。它们都使用CSS解决了这个问题。您的添加了一个建议，但没有提供完整的答案，因此我建议将其添加为注释。

@media (max-width: 1000px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}