bootstrap nav bar расширяется, когда он обрушивается

Question

Я использую bootstrap на своем сайте, и когда я изменяю размер браузера, в точке Navbar превращается в 3 строки. Я не хочу, чтобы это произошло.

Если кто-то может попробовать, и дайте мне знать, что мне нужно изменить, я бы это уложил.

URL-адрес является: https://allthings.trade/poultry

Приветствия Jake

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

1200px ваша тормозная точка