Question

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

以下是我的导航栏的外观：

现在，当屏幕宽度达到991px时，我的导航栏会有额外的CSS来缩小

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

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

某些链接不在导航栏中。我希望它的工作原理完全相同，当我将屏幕缩小并且原始的Bootstrap代码开始用于移动设备时（它只是在导航栏中添加一个滚动条，所有菜单元素都在导航栏内。

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

以下是导航栏的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;
}

}

另外你应该使用＆＃34; navbar-brand＆＃34;您的徽标的类，并将其放在汉堡菜单按钮后面：

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

Bootstrap 3导航栏崩溃无法正常工作

2 个答案: