如何在引導程序摺疊的導航欄中放置藥丸？

Question

我試圖在崩潰時將導航欄的藥片居中。這些藥丸似乎在智能手機視口上以混亂的方式疊放。你知道有什麼方法可以使藥片完全集中在智能手機視口上嗎？

這裏是我的代碼：

HTML：

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <div class="row"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" id="navbar_button"> 
        <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="#"><img src="img/big-bone.png"></a> 
      </div> <!-- End navbar-header--> 
      <div class="collapse navbar-collapse" id="navbar"> 
       <ul class="nav nav-pills nav"> 
        <li class="active"><a href="#">Meet Spot</a></li> 
        <li><a href="#">Training</a></li> 
        <li><a href="#">Gallery</a></li> 
        <li><a href="#">History</a></li> 
       </ul> 
      </div> 
     </div> <!--end row--> 
    </div> <!--End container fluid--> 
</nav> 

CSS：

body{ 
    padding-top:70px; 
    } 
    .navbar-default{ 
    background-color:#3C68D7; 
    font-family: helvetica-neue, helvetica, arial, sans-serif; 

    } 


    .navbar .navbar-collapse{ 
    text-align:center; 


     } 

    .nav-pills{ 
     display:inline-block; 
     float:none; 
     margin-left:-90px; 
     } 

     .nav-pills>li>a:hover, 
     .nav-pills>li>a:focus 
     { 

     background-color:#FF9031; 
     } 


     .nav-pills li{ 
     margin-top:3px; 
     } 

     .nav-pills li a { 

     font-size:20px; 
     background-color:#29CBCF; 
     color:white; 
     margin-left:6px; 
     margin-right:6px; 

     } 

     p{ 
     font-family:helvetica-neue; 
     } 

     .navbar-brand { 
    margin-top:-14px; 
    } 


    #navbar_button{ 
    background-color:#29CBCF; 
    border: 1px solid #29CBCF; 
    margin-bottom: 12px; 
    margin-top:9px; 
    } 

    #navbar_button:active{ 
    background-color: #FF9031; 
    border: 1px solid #FF9031; 
    } 

Answer 1

我會嘗試這樣的事：

@media only screen and (max-width : 767px) { 
.nav-pills>li { 
    float: none; 
    text-align: center; 
} 
} 

Answer 2

添加.nav-stacked到ul有.nav-pills。

參考：http://getbootstrap.com/components/#nav-pills