Justify bootstrap navbar links

Question

Я пытаюсь сделать ссылки на растяжке на всю длину навигационной панели. Я осмотрелся здесь и нашел некоторую полезную информацию, но не может заставить его работать правильно

HTML:

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-links"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 

      <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home"></span></a> 

     </div> 


     <div class="collapse navbar-collapse" id="collapsable-links"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Menu</a></li> 
       <li><a href="#">Gallery</a></li> 
       <li><a href="#">Blog</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 

    </div> 

Это мой Navbar. Я пытался добавить нав выравнивание к моим улям тегу и установить следующий CSS

.navbar-nav>li { 
    float: none; 
} 

этого вид работал, но он делает все ссылки выпадающей из-за марку я думаю

Я взял кнопку домой из заголовка и добавить его к ли в моем ул (я не хочу, чтобы свернуть, но думал, что я бы проверить это), и вид работ слишком

Проблема с вышесказанным заключается в том, что все, кажется, выровнены справа, и мне нужно, чтобы она была выровнена влево. Я борюсь с этим, и любая помощь будет высоко оценена.

Answer 1

В первом я это исправил, изменив свой код от:

<ul class="nav navbar-nav nav-justified"> 

к:

<ul class="nav nav-justified"> 

Это, казалось, однако работать он испортил много форматирования, который позаботятся navbar-nav класс.

Посмотрев на файл с расширением css и играя с несколькими классами, мне удалось решить проблему. Обоснованный nav был установлен на ширину 100%, но из-за некоторого дополнения, установленного в классе navbar-nav, это больше не вписывалось ни в одну строку, а толкало ссылки вниз. используя приведенный ниже код i удалось решить проблему

.nav-justified { 
width: 98%; 
} 
.nav-justified > li { 
float: none; 
} 
@media (min-width: 768px) { 

    .nav-justified { 
     width: 97%; 
    } 
} 

Теперь все работает так, как должно.