Сложенные пункты меню не 100% в ширину с Bootstrap 3

Question

Использование bootstrap navbar Я не могу сделать пункты меню в сложенном режиме 100%. По какой-то причине на одной стороне пунктов меню есть запас.

Fiddle: http://jsfiddle.net/yudcbv7n/

<div class="navbar navbar-default navbar-static-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> 
     <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 navbar-header-brand-collapsed" href="#"><i class="fa fa-bus"></i> Project name</a> 
    </div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav nav-justified"> 
     <a class="navbar-brand navbar-brand-collapsed" href="#"><i class="fa fa-bus"></i> Project name</a> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact">Contact</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</div> 

И некоторые CSS:

@media (min-width: 767px) { 
    .navbar-nav.nav-justified > li{ 
     float:none; 
    }   
    .navbar-header-brand-collapsed { 
     display:none; 
    } 
} 

@media (max-width: 767px) { 
    .navbar-header-brand-collapsed { 
     display:block; 
    } 
    .navbar-brand-collapsed { 
     display:none; 
    } 
} 

Answer 1

Попробуйте это:

FIDDLE DEMO

BOOTPLY DEMO

Использование text-center вместо nav-justified

<ul class="nav navbar-nav text-center"> 

Answer 2

Виновник кажется .nav выравнивания класса. Кажется, что это (путано) не предназначено для использования с навигационной панелью (.navbar).

Если вы посмотрите документацию Bootstrap, в нем упоминается, как использовать .nav-оправдано с классом .nav, используя вкладки и пилюли, но не с .navbar.

Я предлагаю удалить класс .nav-justified. Это приведет к тому, что ваши свернутые элементы меню будут заняты полной шириной.