角度uiとブートストラップ付き水平ナビゲーションバーの中央に検索フォームを配置する方法

Question

私は以下のようにnavbarを持っています。検索フォームは左揃えになります。私はそれを右に整列させるために "プル右"を使用することができますが、水平ナビゲーションバーの中央で検索フォームを取る方法を見つけることができませんでした。私は何をすべきか？

ナビゲーションバーコード

<nav class="navbar navbar-default" role="navigation"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed"> 
       <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> 
      </button> 
      <a href class="navbar-brand" ui-sref="index">test topbar</a> 
     </div> 
     <div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'"> 
      <ul class="nav navbar-nav navbar-right"> 

       <li ><a ui-sref="account"><small> My Account </small></a></li> 
       <li class="nav-divider"></li> 
       <li ><a href ng-click="LogOut()" ><small>Logout </small> </a></li> 
      </ul> 
      <div class="col-sm-6 col-md-6"> 
       <form class="navbar-form" role="search"> 
        <div class="form-group" style="display: inline;"> 
         <div class="input-group"> 
          <input type="text" class="form-control" placeholder="Search" name="q"> 
          <span style="width: 1%;" class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span> 
         </div> 
        </div> 
       </form> 
      </div>   
     </div>  
    </nav> 

Answer 1

ただ、フォームにtext-align:centerを適用します。

実施例：

@media (min-width: 768px) { 
 
    .navbar-form.navbar-center { 
 
    float: none; 
 
    text-align: center; 
 
    } 
 
    .navbar-form.navbar-center .input-group .form-control { 
 
    min-width: 400px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default navbar-static-top" role="navigation"> 
 
    <div class="container-fluid"> 
 

 
    <div class="navbar-header"> 
 

 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 

 
     <a href class="navbar-brand" ui-sref="index">test topbar</a> 
 

 
    </div> 
 

 
    <div class="collapse navbar-collapse" id="navbar"> 
 

 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li> 
 
      <a href="#"> 
 
      <small> My Account </small> 
 
      </a> 
 
     </li> 
 
     <li class="nav-divider"></li> 
 
     <li> 
 
      <a href="#"> 
 
      <small> Logout </small> 
 
      </a> 
 
     </li> 
 
     </ul> 
 

 
     <form class="navbar-form navbar-center" role="search"> 
 
     <div class="form-group"> 
 
      <div class="input-group"> 
 
      <input type="text" class="form-control" placeholder="Search" name="q"> 
 
      <span class="input-group-addon"> 
 
      <span class="glyphicon glyphicon-search"></span> 
 
      </span> 
 
      </div> 
 
     </div> 
 
     </form> 
 

 
    </div> 
 

 
    </div> 
 
</nav>