Bootstrap 导航栏正在折叠

Question

我正在努力升级网站，使其变得响应式。我正在使用推特 bootstrap。我已经尝试了几个我在网上找到的不同的导航栏模板，但我总是遇到同样的问题。正如您在某些分辨率下的图像中看到的那样，导航栏没有按应有的方式折叠。

问题：

导航栏html代码：

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.htm">Index</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="casameio.htm">casa do meio</a>
            </li>
            <li><a href="casabrava.htm">casa brava</a>
            </li>
            <li><a href="casavelha.htm">casa velha</a>
            </li>
            <li><a href="pool.htm">pool</a>
            </li>
            <li><a href="prijzen.htm">prijzen</a>
            </li>
            <li><a href="ons.htm">over ons</a>
            </li>
            <li><a href="activ.htm">activiteiten</a>
            </li>
            <li><a href="guestbook.htm">gastenboek</a>
            </li>
            <li><a href="omgeving.htm">kaartje</a>
            </li>
            <li><a href="contact.htm">contact</a>
            </li>
            <li><a href="links.htm">linken</a>
            </li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

我的 css 里也有这个：

@media (min-width: 768px) and (max-width: 991px) {
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display:block !important;
}
.navbar-header {
    float:none;
}

}

如有任何帮助，我们将不胜感激！

Answer 1

您的导航看起来相当宽，所以您可以做的就是在 bootstrap 导航折叠时简单地进行更改。查看您的代码，1000px 似乎是发生崩溃的一个很好的断点，但您可以尝试一下。

一个解决方案是添加一个新的媒体查询来覆盖 Bootstraps 的媒体查询。如果您不想直接编辑 bootstrap 代码，此解决方案会很好：

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

如果您使用 LESS，另一个更简单的选项是更改触发断点的变量。您可以改为使用以下内容：

// Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: 1000px;

Answer 2

这是完整的CSS（*考虑到您的网站结构）如果您想更改较小视口上导航的断点。

您还应该考虑将一些链接移动到下拉列表中，这样您就可以避免所有这些情况。

@media (max-width: 1199px) {
  #custom-bootstrap-menu .navbar-collapse.collapse {
    display: none !important;
  }
  #custom-bootstrap-menu .navbar-collapse.collapse.in {
    display: block !important;
  }
  #custom-bootstrap-menu .navbar-toggle {
    display: block !important;
  }
  #custom-bootstrap-menu .navbar-collapse {
    text-align: center;
    display: block !important;
  }
  #custom-bootstrap-menu .navbar-header {
    float: none;
    display: block !important;
  }
  #custom-bootstrap-menu .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }
  #custom-bootstrap-menu .navbar-nav > li {
    float: none;
  }
  #custom-bootstrap-menu .navbar-nav> li > a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<p>
  <img src="http://www.huisjeinportugal.nl/images/top.jpg" class="img-responsive">
</p>
<div id="custom-bootstrap-menu" class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header"><a class="navbar-brand" href="index.htm">Index</a>

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>

      </button>
    </div>
    <div class="collapse navbar-collapse navbar-menubuilder">
      <ul class="nav navbar-nav">
        <li><a href="casameio.htm">casa do meio</a>

        </li>
        <li><a href="casabrava.htm">casa brava</a>

        </li>
        <li><a href="casavelha.htm">casa velha</a>

        </li>
        <li><a href="pool.htm">pool</a>

        </li>
        <li><a href="prijzen.htm">prijzen</a>

        </li>
        <li><a href="ons.htm">over ons</a>

        </li>
        <li><a href="activ.htm">activiteiten</a>

        </li>
        <li><a href="guestbook.htm">gastenboek</a>

        </li>
        <li><a href="omgeving.htm">kaartje</a>

        </li>
        <li><a href="contact.htm">contact</a>

        </li>
        <li><a href="links.htm">linken</a>

        </li>
      </ul>
    </div>
  </div>
</div>

Bootstrap 导航栏正在折叠

Bootstrap nav bar collapsing

html

navbar

responsive-design

twitter-bootstrap