Центр элементов, навигация

Question

Я собираюсь создать отзывчивый дизайн с помощью Bootstrap в первый раз, просто настройте элементы nav.

Но вот моя проблема: контейнер для навигации не входит в центр страницы.

См. 1.jpg Это до сих пор у меня есть. См. 2.jpg, что я хочу. [Это до сих пор у меня] [1]

Хотя, если я использую свой собственный wraper как .mainContainer, который приходит, что я хочу. но хотелось бы знать, можно ли достичь желаемого результата через bootstrap css?

Я попробовал несколько методов, таких как текст, выравнивание по центру и т.д ... [это я хочу] [2]

Вот мой код:

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <nav>    
      <div class="navbar-inner" >   
       <ul class="nav nav-pills"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#">About Us</a></li> 
        <li><a href="#">Blog</a></li> 
        <li><a href="#">Workshops</a></li> 
        <li><a href="#">Entertainment</a></li> 
        <li><a href="#">Contact Us</a></li>  
       </ul> 
      </div> 
     </nav> 
    </div> 
</div> 

пядь

Я попытался компенсировать также, но не получил то, что я хочу. если я использую класс .container, который хорош, но хотел сделать это, используя .container-fluid. Дайте мне знать, как я могу решить эту проблему.

Answer 1

Проверьте это: http://bootply.com/73827

Вы можете отцентрировать меню с помощью:

nav { 
    text-align: center; 
} 
.navbar-inner { 
    display: inline-block; /* makes element respond to parent's text-align */ 
}