要素をブートストラップナビバーの中央に置く

Question

検索バーとハンバーガーメニューが隣り合っているナビゲーションバーがあります。これらの要素を中央に保つのに問題があります。私は別の携帯電話の画面を切り替えたときに要素位置のサイズ、ここで

を変更するHTMLです：

  <div class="col-xs-12" id="mobile-search">     

       <div class="search-area"> 

       <ul class="search-bar" id="mobile-go"> 
        <li> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        </button> 
        </li> 
        <li class="search-wrapper no-wrap"> 
        <div class="no-wrap search-box" id="mobile-center"> 
         ##SEARCHBOX[autocomplete=true]## 
        </div> 
        </li> 
       </ul> 
       </div> 
      </div> 

      </div> 

私は常に中央に配置するUL要素をしたいが、COL中心にクラスを追加するには、何もしませんでした。ほかに何をしようとしていますか？

編集：ヘッダファイルの完全なコード：

<ac:pagelayout id="HeaderPage"> 

    <div class="LayoutTopTop"> 
    <div class="row"> 
     <div class="col-sm-12 hidden-xs"> 
     <ac:widgetarea id="HeaderBar"><ac:widget id="HTML3742" type="HTML"><div class="top-bar"> 

      <ac:if setting="Show Phone Number in Header"> 
      <div class="top-bar-info"><strong>##STOREPHONE##</strong></div>    
      </ac:if> 
      <ac:if setting="Show Email Address in Header"> 
      <div class="top-bar-info"><strong> <a class="inherit no-ul color-inherit" href="mailto:##STOREEMAIL##">##STOREEMAIL##</a></strong></div> 
      </ac:if> 

      </div></ac:widget> 
     </ac:widgetarea> 
     </div> 
    </div> 
    <div class="row top-header"> 
     <div class="col-sm-7 contentCentered hidden-xs "> 
     <ac:widgetarea id="UtilNavArea"><ac:widget id="HTML3744" type="HTML"> 
      <a href="/"> 
      <img src="/images/Header-images/Hitech-logo.png" class="main-logo img-responsive" alt="HiTech "> 
      </a>   
      </ac:widget> 
     </ac:widgetarea> 


     </div> 
     <div class="col-sm-4 col-sm-push-1 hidden-xs "> 
     <ul class="header-nav nav navbar-nav "> 
      <ac:if setting="Show Search as Dropdown"> 
      <li><a href="#" data-toggle="dropdown"> 
       <i class="icon-search"></i> 
       <span class="visible-xs visible-lg">Search</span> 
       </a> 
       <ul class="dropdown-menu"> 
       <li> 
        <div class="panel-body no-wrap search-box" id="nav-search"> 
        ##SEARCHBOX[autocomplete=true]## 
        </div> 
       </li> 
       </ul> 
      </li> 
      </ac:if> 

      <li> 
      <ac:if setting="Show Customer Login as Dropdown"> 
       <a href="#" data-toggle="dropdown"> 
       <i class="icon-user"></i> 
       <span class="visible-xs visible-lg">##IF[LoggedIn]## My Account ##ELSE## Login ##ENDIF##</span> 
       </a> 
       <ul class="dropdown-menu"> 
       $$CUSTOMERLOGIN3739$$ 
       </ul> 
       <ac:else> 
       <a href="/store/myaccount.aspx"> 
        <i class="icon-user"></i> 
        <span class="visible-xs visible-lg">##IF[LoggedIn]## My Account ##ELSE## Login ##ENDIF##</span> 
       </a> 
       </ac:else> 
      </ac:if> 
      </li> 
      <li class="no-wrap"> 
      <ac:if setting="Show Shopping Cart as Dropdown"> 
       <a href="#" data-toggle="dropdown"> 
       <div class="in-block"><i class="icon-shopping-cart"></i></div> 
       <span class="visible-xs visible-lg">Shopping Cart</span> 
       ##IF[CartIsEmpty]## ##ELSE## 
       <span class="badge">##CARTITEMSCOUNT##</span> 
       ##ENDIF## 
       </a> 
       <ul class="dropdown-menu"> 
       <li> 
        ##IF[CartIsEmpty]## 
        <p class="m-20">Your cart is empty!</p> 
        ##ENDIF## 
        $$SMALLSHOPPINGCART3740$$ 
       </li> 
       </ul> 

       <ac:else> 
       <a href="/store/shopcart.aspx" rel="nofollow"> 
        <div class="in-block"><i class="icon-shopping-cart"></i></div> 
        <span class="visible-xs visible-lg">Shopping Cart</span> 
        ##IF[CartIsEmpty]## ##ELSE## 
        <span class="badge">##CARTITEMSCOUNT##</span> 
        ##ENDIF## 
       </a> 
       </ac:else> 
      </ac:if> 
      </li> 
     </ul></div> <!-- just added--> 
    </div> 
    <ac:widgetarea id="TopHeaderWidgets"><ac:widget id="MENUBAR3738" type="MenuBar" linkgroupid="1"> 
     <ac:visibilityarea id="dvControl"> 
     $$ADMINHELP$$<div id="little"> 
      <header class="top"></header> 
      <div id="nav"> 
      <div> 
       <img src="/images/Header-images/Hitech-logo.png" class="main-logo img-responsive" alt="HiTech " id="top-logo"> 

      </div> 
      <nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation" data-spy="affix" data-offset-top="60"> 
       <div class="navbar-header"> 

       <div class="col-xs-12" id="mobile-search">     

        <div class="search-area"> 

        <ul class="search-bar" id="mobile-go"> 
         <li> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         </button> 
         </li> 
         <li class="search-wrapper no-wrap"> 
         <div class="no-wrap search-box" id="mobile-center"> 
          ##SEARCHBOX[autocomplete=true]## 
         </div> 
         </li> 
        </ul> 
        </div> 
       </div> 

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

       </div> 
       <!-- /.navbar-collapse --> 
      </nav> 
      </div> 
     </div><!--end of mobile--> 

Answer 1

は、あなたのUL要素または任意のコンテンツを使用すると、コンテナクラスでdivの内側にセンタリングしたいを包むようにしてください。

<div class="container"> 
    Put Content Here 
</div>