Bootstrap 3 导航栏折叠无法正常工作

Question

我想更改引导程序崩溃的断点。我在堆栈上找到了一些很棒的答案，但是它们似乎在我的导航栏上无法正常工作

这是我的导航栏的样子：

现在我有这个额外的 CSS 让我的导航栏在屏幕宽度达到 991 像素时折叠起来

@media (max-width: 991px) {
.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;
}
.navbar-text {
    float: none;
    margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
    display: block!important;
}
.collapsing {
    overflow: hidden!important;
}
}

当我调整浏览器的大小时，会发生什么：（请参阅红色箭头了解我的问题）。

一些链接超出了导航栏。我希望它的工作方式与我缩小屏幕并为移动设备启动原始引导代码时的工作方式完全相同（它只是在导航栏中添加了一个滚动条，所有菜单元素都在导航栏中。

这就是我缩小屏幕并启动原始引导代码时的样子：

这是我的导航栏的 html 代码：

<nav class="navbar navbar-inverse navbar-fixed-top yellow_border_navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
      	<li>
					<a href="index.php"><img src="images/SingleLogo.png" height="64"></a>
				</li>
				<li class="dropdown navigation_link_margin">
	        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Home
	        <span class="caret"></span></a>
	        <ul class="dropdown-menu">
	          <li><a href="index.php">Home</a></li>
	          <li><a href="index.php#IndexAbout">About</a></li>
	          <li><a href="index.php#IndexContact">Contact</a></li>
	        </ul>
	      </li>
      	<?php if(isset($_SESSION['id'])){?>
					<li class="navigation_link_margin"><a href="profile.php">Profile</a></li>
        <?php } ?>
				<li class="navigation_link_margin"><a href="clubs.php">Clubs</a></li>
        <li class="navigation_link_margin"><a href="tournaments.php">Tournaments</a></li>
        <li class="navigation_link_margin"><a href="leaderboard.php">Leaderboard</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
      	<?php if(!isset($_SESSION['id'])){?>
	      	<li><a href="#registerModal" data-toggle="modal"><span class="glyphicon glyphicon-user"></span> Register</a></li>
	        <li><a href="#LoginModal" data-toggle="modal"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
				<?php } else { ?>
	        <li><a href="message.php"><?php navigation_display_new_messages(); ?></a></li>
					<li class="dropdown">
		        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><?php echo navigation_get_first_name(); ?>
		        <span class="caret"></span></a>
		        <ul class="dropdown-menu">
							<?php side_menu_display(); ?>
		          <li><a href="account.php"><span class="glyphicon glyphicon-user"></span> Account</a></li>
							<li><a href="credits.php"><span class="glyphicon glyphicon-asterisk"></span> Credits</a></li>
		          <li><a href="index.php?logout"><span class="glyphicon glyphicon-record"></span> Log Out</a></li>
		        </ul>
	      	</li>
        <?php } ?>
      </ul>
    </div>
  </div>
</nav>

Answer 1

Bootstrap 设置的最大高度正在裁剪移动导航栏。您可以像这样覆盖...

  .collapse.in{
      display:block !important;
      max-height: initial;
  }

http://www.bootply.com/jv5TNZF9KM

Answer 2

默认情况下，小型设备的 Bootstrap 断点是 768px。 假设您有 bootstrap.css 文件（不是缩小版），您可以通过将相应的 768px 值更改为 991px 来直接更改该文件内的断点。

然而，更简单的解决方案是通过以下通用代码覆盖它，但这不是最干净也不是最有效的方法：

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

}

您还应该为您的徽标使用“navbar-brand”类，并将其放在汉堡菜单按钮之后：

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">
    <img src="iimages/SingleLogo.png" alt="">
</a>