html - Bootstrap 在溢出时折叠导航栏

Question

我目前使用的是 Bootstrap 3.3.4。我的桌面导航栏中的内容在某一点太长，因此溢出到下一行。

下图概述了我的意思。

您可以看到 Logo 在调整浏览器大小时将链接推到新行。

这是我的 CSS，它覆盖了一些 Bootstrap 类，不仅仅是少量的格式设置，例如容器流体的最大宽度:

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:700|Lusitana|Arimo);

.container-fluid {
    width: 75%;
}
.navbar-spacer {
    height: 70px;
}
.navbar-header {
    padding-top: 10px !important; 
    padding-bottom: 0px !important;
}
.navbar-nav > li > a {
    padding-top: 25px !important; 
    padding-bottom: 25px !important;
}
.navbar-brand {
    padding-top: 10px !important; 
    padding-bottom: 10px !important;
    padding-left: 0px !important; 
}
.navbar {
    min-height: 70px !important
}
@media all and (max-width: 767px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 767px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 767px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 767px), only screen and (min-device-pixel-ratio: 2) and (max-width: 767px), only screen and (min-resolution: 192dpi) and (max-width: 767px), only screen and (min-resolution: 2dppx) and (max-width: 767px) {@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 950px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 950px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 950px), only screen and (min-device-pixel-ratio: 2) and (max-width: 950px), only screen and (min-resolution: 192dpi) and (max-width: 950px), only screen and (min-resolution: 2dppx) and (max-width: 950px) {
    .container-fluid {
        width: 100%;
    }
    .navbar-nav > li > a {
        padding-top: 15px !important; 
        padding-bottom: 15px !important;
    }
    .navbar-header {
        height: 70px;
    }
}

这是导航栏的 HTML/PHP:

<?php
    $currentFile = $_SERVER["PHP_SELF"];
    $parts = Explode('/', $currentFile);    
?>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class='navbar-spacer'></div>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
  <a class="navbar-brand" href="./"><img src='inc/img/UFCULogo.png'></a>
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li <?php if($parts[count($parts) - 1] == "index.php") { echo "class='active'"; } ?>><a href="./"><span class='glyphicon glyphicon-home'></span> Home</a></li>
        <li <?php if($parts[count($parts) - 1] == "contact.php") { echo "class='active'"; } ?>><a href="./contact.php"><span class='glyphicon glyphicon-phone-alt'></span> Contact</a></li>
        <li <?php if($parts[count($parts) - 1] == "benefits.php" || $parts[count($parts) - 1] == "newmembers.php") { echo "class='active'"; } ?> class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class='glyphicon glyphicon-user'></span> Members <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li <?php if($parts[count($parts) - 1] == "benefits.php") { echo "class='active'"; } ?>><a href="./benefits.php"><span class='glyphicon glyphicon-thumbs-up'></span> Benefits</a></li>
            <li class="divider"></li>
            <li <?php if($parts[count($parts) - 1] == "newmembers.php") { echo "class='active'"; } ?>><a href="./newmembers.php"><span class='glyphicon glyphicon-plus'></span> New Members</a></li>
          </ul>
        </li>
        <li <?php if($parts[count($parts) - 1] == "staff.php" || $parts[count($parts) - 1] == "map.php" || $parts[count($parts) - 1] == "times.php") { echo "class='active'"; } ?> class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class='glyphicon glyphicon-info-sign'></span> About <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li <?php if($parts[count($parts) - 1] == "staff.php") { echo "class='active'"; } ?>><a href="./staff.php"><span class='glyphicon glyphicon-user'></span> Staff</a></li>
            <li class="divider"></li>
            <li <?php if($parts[count($parts) - 1] == "map.php") { echo "class='active'"; } ?>><a href="./map.php"><span class='glyphicon glyphicon-map-marker'></span> Location</a></li>
            <li class="divider"></li>
            <li <?php if($parts[count($parts) - 1] == "times.php") { echo "class='active'"; } ?>><a href="./times.php"><span class='glyphicon glyphicon-time'></span> Opening Times</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

同样，我使用的是 Bootstrap 3.3.4，所以我在以前的帖子中发现的建议似乎不起作用。

这是一个 JSFiddle:

https://jsfiddle.net/zupu3L6t/

简单地说，我正在寻找解决此问题的建议，最好是在 1000 像素处折叠导航栏还是在内容溢出时折叠导航栏，我将如何解决这个问题。

希望我已经提供了必要的信息，如果没有请通知我，我会很乐意提供。

Answer 1

如果你使用bootstrap 3.3.4，那么在第4097行，你有如下代码

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

与

@media (min-width: 1000px) {

你将在 1000 像素上有一个折叠的导航。如果它不起作用，请告诉我。

希望对您有所帮助。如果是，+1。