水平中心搜索欄引導程序導航

Question

我正在嘗試將搜索欄居中在我的導航欄中。我使用bootstrap，我嘗試了md-4上的文本中心，但它沒有任何效果。

這是我的代碼的鏈接。

http://bootsnipp.com/snippets/50b38

Answer 1

在CSS中標記你的代碼，我把那似乎掃

.top-header { 
    background-color: #D9D9D9; 
    text-align:center; 
} 

期待它幫助你

Answer 2

引導使用12列的網格。你的代碼的第一列是8，第二列是4.這意味着你的第一列將是頁面的2/3。通過製作col-md-4，它可以讓你的中間div成爲中心。

<div class="row top-header"> 
    <div class="container"> 
     <div class="col-md-4"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=30&txt=320%C3%97240&w=235&h=126" alt="logo image" /> 
     </div> 
     <div class="col-md-4"> 
      <div id="search-center"> 
       <div class="input-group"> 
        <input type="text" class="form-control input-lg" placeholder="Search" /> 
        <span class="input-group-btn"> 
         <button class="btn btn-info btn-lg" type="button"> 
          <i class="glyphicon glyphicon-search"></i> 
         </button> 
        </span> 
       </div> 
      </div> 
     </div> 
    </div> 
    </div> 

下面是一個更新的源： http://bootsnipp.com/user/snippets/E7WgX