bootstrap导航栏变宽时崩溃

Question

我在我的网站上使用引导程序，当我调整浏览器的大小时，导航栏变成3行。我不希望这种情况发生。

如果有人可以请尝试一下，让我知道我需要改变我会适当的。

的网址是：https://allthings.trade/poultry

干杯杰克

Answer 1

所有这一切都在我看来，是你想放入一个容器元素的量。举个例子，如果你删除了一些链接，你不再有这个问题。

所以你可以调整，因为你认为合适。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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" /> 
 
<h3>Fewer Links</h3> 
 
<div class="navbar navbar-inverse"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button> <a href="/poultry" class="navbar-brand">All Things Poultry</a> 
 
     <a href="#" class="dropdown-toggle navbar-brand" data-toggle="dropdown" role="button" aria-expanded="false"><span class="caret"></span></a> 
 

 
     <ul class="dropdown-menu" role="menu"> 
 
     <li class="text-center">AllThings Sites</li> 
 
     <li class="divider"></li> 
 
     <li><a href="/farming">AllThings Farming</a> 
 

 
     </li> 
 
     <li><a href="/livestock">AllThings Livestock</a> 
 

 
     </li> 
 
     <li><a href="/poultry">AllThings Poultry</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li> <a href="/Poultry/geese">Geese</a> 
 

 
     </li> 
 
     <li> <a href="/Poultry/poultrysupplies">Supplies</a> 
 

 
     </li> 
 
     <li> <a href="/Poultry/turkeys">Turkeys</a> 
 

 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="/poultry/register">Register</a> 
 

 
     </li> 
 
     <li><a href="/poultry/login">Log in</a> 
 

 
     </li> 
 
     <li> 
 
      <a data-toggle="modal" href="#selectLocation" class="pull-right"> 
 
      <img alt="Select Country" height="20" src="http://placehold.it/150x50" /> 
 
      </a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div> 
 
<hr> 
 
<h3>Current Links</h3> 
 
<div class="navbar navbar-inverse"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button> <a href="/poultry" class="navbar-brand">All Things Poultry</a> 
 
     <a href="#" class="dropdown-toggle navbar-brand" data-toggle="dropdown" role="button" aria-expanded="false"><span class="caret"></span></a> 
 

 
     <ul class="dropdown-menu" role="menu"> 
 
     <li class="text-center">AllThings Sites</li> 
 
     <li class="divider"></li> 
 
     <li><a href="/farming">AllThings Farming</a> 
 

 
     </li> 
 
     <li><a href="/livestock">AllThings Livestock</a> 
 

 
     </li> 
 
     <li><a href="/poultry">AllThings Poultry</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li> <a href="/Poultry/chickens">Chickens</a> 
 

 
     </li> 
 
     <li> <a href="/Poultry/ducks">Ducks</a> 
 

 
     </li> 
 
     <li> <a href="/Poultry/poultryevents">Events</a> 
 

 
     </li> 
 
     <li> <a href="/Poultry/gamebirds">Game Birds</a> 
 

 
     </li> 
 
     <li> <a href="/Poultry/geese">Geese</a> 
 

 
     </li> 
 
     <li> <a href="/Poultry/poultrysupplies">Supplies</a> 
 

 
     </li> 
 
     <li> <a href="/Poultry/turkeys">Turkeys</a> 
 

 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="/poultry/register">Register</a> 
 

 
     </li> 
 
     <li><a href="/poultry/login">Log in</a> 
 

 
     </li> 
 
     <li> 
 
      <a data-toggle="modal" href="#selectLocation" class="pull-right"> 
 
      <img alt="Select Country" height="20" src="http://placehold.it/150x50" /> 
 
      </a> 
 

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

Answer 2

添加在您的响应css文件

@media(max-width:1200px) { 

.navbar-collapse.collapse { 
    display: none !important; 
} 
.navbar-collapse { 
    overflow-x: visible !important; 
} 
.navbar-header { 
    position: relative; 
    width: 100%; 
} 
.navbar-collapse.in { 
    overflow-y: auto !important; 
} 
.collapse.in { 
    display: block !important; 
} 
.navbar-toggle { 
    position: absolute; 
    float: right; 
    right: 0; 
    top: 0; 
    display: block; 
} 
} 

1200像素是你的刹车点