부트 스트랩 메뉴 중앙 집중식 문제

Question

나는 메뉴를 중앙에 놓으려고 노력하고 있지만 제대로 작동하지 않을 수 있습니다. 브라우저/화면 크기를 변경하면 위치가 깨집니다. (크기가 너무 작 으면 축소됩니다.) 메뉴에는 세 부분이 있습니다. 왼쪽 부분, 검색 창 및 오른쪽 부분. 내 메뉴를 중앙에 배치하고 싶지만 지금까지 만들 수 없었습니다.

여기 내 코드가 있습니다. http://jsfiddle.net/bhtf8f09/

이미지 : http://i.imgur.com/XBTlpq3.png

HTML

<nav class="navbar navbar-inverse"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </div> 
      <div class="collapse navbar-collapse" id="myNavbar"> 
       <ul class="nav navbar-nav"> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown"> &nbsp;<span class="glyphicon glyphicon-align-justify pull-right"></span></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Account Settings <span class="glyphicon glyphicon-cog pull-right"></span></a></li> 
          <li class="divider"></li> 
          <li><a href="#">User stats <span class="glyphicon glyphicon-stats pull-right"></span></a></li> 
          <li class="divider"></li> 
          <li><a href="#">Messages <span class="badge pull-right"></span></a></li> 
          <li class="divider"></li> 
          <li><a href="#">Favourites Snippets <span class="glyphicon glyphicon-heart pull-right"></span></a></li> 
          <li class="divider"></li> 
          <li><a href="#">Sign Out <span class="glyphicon glyphicon-log-out pull-right"></span></a></li> 
         </ul> 
        </li> 
        <!--<li><a href="#"><span class="glyphicon glyphicon-align-justify"></span></a></li>--> 
        <li><a href="#"><span class="glyphicon glyphicon-home"></span> Anasayfa</a></li> 
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Profil</a></li> 
        <!--<li><a href="#"><span class="glyphicon glyphicon-user"></span> Keşfet</a></li>--> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Keşfet &nbsp;<span class="glyphicon glyphicon-chevron-down pull-right"></span></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Account Settings <span class="glyphicon glyphicon-cog pull-right"></span></a></li> 
          <li class="divider"></li> 
          <li><a href="#">User stats <span class="glyphicon glyphicon-stats pull-right"></span></a></li> 
          <li class="divider"></li> 
          <li><a href="#">Messages <span class="badge pull-right"></span></a></li> 
          <li class="divider"></li> 
          <li><a href="#">Favourites Snippets <span class="glyphicon glyphicon-heart pull-right"></span></a></li> 
          <li class="divider"></li> 
          <li><a href="#">Sign Out <span class="glyphicon glyphicon-log-out pull-right"></span></a></li> 
         </ul> 
        </li> 
       </ul> 
       <div class="col-sm-3 col-md-3 pull-left"> 
        <form class="navbar-form" role="search"> 
         <div class="input-group"> 
          <input type="text" class="form-control" placeholder="Arama" name="srch-term" id="srch-term"> 
          <div class="input-group-btn"> 
           <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
          </div> 
         </div> 
        </form> 
       </div> 
       <ul class="nav navbar-nav"> 
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 

CSS

당신이 요소에 .col-md-* 및 .col-sm-* 어쩌면 .col-xs-*를 사용할 필요가

html { 
    width:100%; 
    height:100%; 
} 

.collapse, .navbar-collapse { 
    width:55% !important; 
    margin:0 auto !important; 
} 

.navbar { 
    border-radius:0; 
    background-color:#bf5b5b; 
} 

.navbar-inverse .navbar-nav > li > a { 
    color:#fadaaf; 
} 

.navbar a { 
    color:#337ab7; 
} 


.glyphicon-chevron-down { 
    margin-top:3%; 
} 

Answer 1

. 이 마크 업은 크게 단순화 될 수 있으며 활용 된 부트 스트랩으로 조금 더 개선 될 수 있습니다. 가운데에 마진을 적용하는 .container에 모든 것을 넣는 것을 시도하십시오.