부트 스트랩 : 중앙 탐색 탐색 모음 축소시

Question

내 검색 창을 접을 때 가운데에 놓으려고합니다.
현재로서는 다음과 같이 보입니다.

링크가 검색 막대가 아닌 가운데에 있는지 확인하십시오. 이제 사용자 정의 CSS

<!-- Navigation Bar Start --> 
    <div class = "navbar navbar-default navbar-static-top"> 

     <!-- Container --> 
     <div class = "container"> 

      <div class=".navbar-header"> 

      <!-- Site Title --> 
      <a href = "#" class = "navbar-brand">James Woods</a> 

      </div> <!-- END Navbar Header --> 

      <!-- Mobile Nav Button --> 
      <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse"> 
       <span class = "icon-bar"></span> 
       <span class = "icon-bar"></span> 
       <span class = "icon-bar"></span> 
      </button> <!-- END Mobile Nav Button --> 

      <!-- Navigation Links --> 
      <div class = "collapse navbar-collapse navHeaderCollapse"> 

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

        <li class="active"><a href = "">Home</a></li> 
        <li><a href = "">Creations</a></li> 
        <li><a href = "blog/index.html">Blog</a></li> 

        <li class = "dropdown"> 
         <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Links<b class = "caret"></b></a> 

         <ul class = "dropdown-menu"> 
          <li><a href = "#">Twitter</a></li> 
          <li><a href = "#">Deviant Art</a></li> 
          <li><a href = "#">Scratch</a></li> 
         </ul> 
        </li> <!-- END Links Nav --> 

        <li><a href = "contact.html">Contact Me</a></li> 

        <li> 

         <form class="navbar-form navbar-left form-inline" id="search" role="search"> 

          <div class="form-group-group"> 
           <div class="input-group" style="width: 220px;"> 
            <input type="text" class="form-control" placeholder="Search"> 
            <span class="input-group-btn"> 
             <button class="btn btn-default" type="button"><b class = "glyphicon glyphicon-search"></b></button> 
            </span> 
           </div> 
          </div> <!-- END form group div --> 

         </form> <!-- END search bar form --> 

        </li> 
       </ul> <!-- END navbar list --> 

      </div> <!-- END navbar collapse div --> 

      </div> <!-- END .navbar-header div --> 

     </div> <!-- END container div --> 

    </div> <!-- END navbar div --> 

    <!-- END ALL NAVBAR CONTENT --> 

그리고 :

@media (max-width: 768px){ 
.navbar-nav li{ 
text-align: center; 
    } 
} 

Answer 1

당신의 CSS에 input-group 추가

이

은 HTML입니다. 사용하여 중앙에 margin: 0 auto;

@media (max-width: 768px){ 
.navbar-nav li { 
    text-align: center; 
    } 
    .navbar-form .input-group { 
    margin: 0 auto; 
    } 
} 

http://bootply.com/108576