Bootstrap Navbar содержание stacking

Question

Bootstrap новичок здесь. Я только сегодня начал использовать Bootstrap для разработки веб-сайта, но что-то происходит, я не могу понять. Я использую следующий код, чтобы создать свою навигацию:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <ul class="nav navbar-nav uppercase bold"> 
       <li><a href="#">Projecten</a></li> 
       <li><a href="#">Over</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
      <a class="navbar-brand pull-right" rel="home" href="#"><img src="images/97x30.png" style="margin-top:-4px;"></a> 
     </div> 
    </div> 

Идея заключается в том, что есть множество ссылок выровненных влево, и отображается логотип выровнен вправо. Теперь я заметил, что это работает отлично, если размер окна браузера больше 768 пикселей (где bootstrap css по-прежнему назначает ширину .container), но когда окно становится меньше (а класс .container больше не имеет ширины, Я полагаю), ссылки, расположенные слева от навигатора, начинают штабелироваться вертикально, а не горизонтально.

Прописные и жирные классы в ul включены в мой пользовательский css, чтобы создать ссылки.

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

Я полагаю, что это, вероятно, что-то очень простое и заставляет меня выглядеть глупо, но я надеюсь, что вы сможете помочь. Спасибо.

Answer 1

Вы можете добавить CSS, как это, чтобы предотвратить его от укладки ..

.navbar-nav { 
    min-width:360px; 
    float: left; 
    margin: 0; 
} 
.navbar-nav>li { 
    float: left; 
} 

http://www.bootply.com/114462