Question

我根据Bootstrap中components link中给出的示例编写了一个导航栏。但导航栏不会像正常情况那样以正确的方式崩溃。如下面的流程所示：

状态1 enter image description here

状态2 enter image description here

状态3 enter image description here

导航栏没有明显折叠，而是首先变为2列，然后折叠。

我发现了之前在stackoverflow中提出过的问题。似乎问题是由bootstrap中定义的默认断点引起的。但是，我不知道在哪里可以改变断点，我该怎么做。

我使用的是最新的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文件中修改了三个部分：

首先，您需要设置导航栏标题何时向左浮动（在可能的情况下为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阈值时：

这

enter image description here

要

enter image description here

Answer 2

似乎你应该能够像这样覆盖默认的导航栏折叠点..（假设新崩溃点有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;
    }
}

演示：http://bootply.com/UQaiG0oNTR

Answer 3

我建议安装Bootstrap with SASS，这样就可以将mixin分开并更易于管理。

使用此配置，断点位于_variable mixins中，_navbar mixin默认选择该变量。

覆盖将起作用，但如果你保持与bootstrap mixin的一致性，它可能更整洁。

Answer 4

阅读您自己链接的文档！

Overflowing content

由于Bootstrap不知道导航栏中的内容需要多少空间，您可能会遇到内容包装到第二行的问题。要解决此问题，您可以：


减少导航栏项目的数量或宽度。

使用自适应实用程序类隐藏某些屏幕尺寸的某些导航栏项目。

更改导航栏在折叠模式和水平模式之间切换的点。自定义@grid-float-breakpoint变量或添加您自己的媒体查询。

Bootstrap导航栏折叠问题

4 个答案:

Overflowing content