javascript - Bootstrap 导航栏折叠问题

Question

我已经根据 components link 中给出的示例编写了一个导航栏。在 Bootstrap 中。但是导航栏并没有像预期的那样以正确的方式折叠。如下流程所示:

状态 1

状态 2

状态 3

导航栏不是急剧折叠，而是先变成2列再折叠。

我在 stackoverflow 中发现了一个相同的问题.问题似乎是由 bootstrap.conf 中定义的默认断点引起的。但是，我不知道在哪里更改断点以及如何更改。

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

在此先感谢您的帮助和建议!

<!--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-->

更新

我研究了这个 link 提供的解决方案，这在最新版本的 Bootstrap 中不起作用。

我找到了定义折叠效果断点的代码块:

@media (min-width: 768px) {
  .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;
  }
}

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

Answer 1

我终于明白了:

要在最新版本中执行此操作:

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

首先您需要设置导航栏标题何时向左浮动(在可能的情况下为 1000 像素):

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

最后您需要定义 navbar-toggle 何时生效:

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

然后等待奇迹发生:

当屏幕达到 1000px 阈值时:

来自

到