Разное Размер загрузочного бутстрапа Navbar center alignment

Question

Может ли кто-нибудь помочь мне сосредоточиться на моем Bootstrap Navbar при изменении размера экрана?

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

<style type="text/css"> 
    .navbar-nav > li{ 
     padding-right:3px; 
    } 
<div class="collapse navbar-collapse navHeaderCollapse"> 
       <ul class="nav navbar-nav navbar-left"> 
        <li class="active"><a href="index.php" style="margin-left:91px;"><span class="glyphicon glyphicon-home"></span> LINK</a></li> 

        <li class="dropdown"> 
         <a href="#" class="dorpdown-toggle" data-toggle="dropdown">LINK<b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">LINK</a></li> 
         </ul> 
        </li> 

        <li> 
         <a href="#" class="dorpdown-toggle" data-toggle="dropdown" >LINK<b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">LINK</a></li> 
          <li><a href="#">LINK</a></li> 
          <li><a href="#">LINK</a></li> 
          <li><a href="#">LINK</a></li> 
          <li><a href="#">LINK</a></li> 
          <li><a href="#">LINK</a></li> 
          <li><a href="#">LINK</a></li> 
         </ul>    </ul> 

      </div> 

Answer 1

Одним из способов может быть:

Bootply: http://www.bootply.com/QCmMLYr56f

CSS:

ul.navbar-nav{ 
    width: 100%; 
    text-align:center 
} 

.navbar-nav li{ 
    display: inline-block; 
    float: none; 
    background:cyan; 
    } 

HTML

<div class="collapse navbar-collapse navHeaderCollapse"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="index.php" style="margin-left:91px;"><span class="glyphicon glyphicon-home"></span> LINK</a></li> 

        <li class="dropdown"> 
         <a href="#" class="dorpdown-toggle" data-toggle="dropdown">LINK<b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">LINK</a></li> 
         </ul> 
        </li> 

        <li> 
         <a href="#" class="dorpdown-toggle" data-toggle="dropdown">LINK<b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">LINK</a></li> 
          <li><a href="#">LINK</a></li> 
          <li><a href="#">LINK</a></li> 
          <li><a href="#">LINK</a></li> 
          <li><a href="#">LINK</a></li> 
          <li><a href="#">LINK</a></li> 
          <li><a href="#">LINK</a></li> 
         </ul>    </li></ul> 

      </div> 

Answer 2

Я думаю, что вы могли бы попробовать это DIV вокруг вашей навигационной панели:

#global { 
    margin-left: auto; 
    margin-right: auto; 
    width: ...; 
} 

Juste изменить width с собственным значением :)

Answer 3

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

<div class="container"> <!-- Start Container --> 
    <div class="collapse navbar-collapse navHeaderCollapse"> <!-- Start Navbar--> 
     <ul class="nav navbar-nav navbar-left"> 
      <li class="active"><a href="index.php" style="margin-left:91px;"><span class="glyphicon glyphicon-home"></span> LINK</a></li>  
         <li class="dropdown"> 
          <a href="#" class="dorpdown-toggle" data-toggle="dropdown">LINK<b class="caret"></b></a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">LINK</a></li> 
          </ul> 
         </li> 

         <li> 
          <a href="#" class="dorpdown-toggle" data-toggle="dropdown" >LINK<b class="caret"></b></a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">LINK</a></li> 
           <li><a href="#">LINK</a></li> 
           <li><a href="#">LINK</a></li> 
           <li><a href="#">LINK</a></li> 
           <li><a href="#">LINK</a></li> 
           <li><a href="#">LINK</a></li> 
           <li><a href="#">LINK</a></li> 
          </ul>   
     </ul> 

    </div> <!--End Navbar--> 
</div> <!-- End Container -->