垂直對齊引導程序跨度

Question

我在我的應用程序上使用引導程序，並且很難使用引導程序垂直對齊一些項目。它包含一個引導行和3個帶有搜索欄，標題和導航鏈接的span4。

這是骨架：

<div class="row"> 
    <div class="span4"> 
    form code, as generated by rails form_for 
    <div class="span4"> 
    Page title 
    <div class="span4"> 
    pagination links, as generated by rails will_paginate 

這是Rails代碼：

<div class="row"> 
    <div class="span4"> 
    <%= form_tag mybooks_path, class: "form-search", :method => 'get', :id => "mybooks_search" do %> 
    <div class="input-append"> 
    <%= text_field_tag :search, params[:search], class: "search-query" %> 
    <%= submit_tag "Search", :name => nil, class: "btn" %> 
</div> 
<% end %> 
    </div> 
    <div class="span4"> 
    <h2>My book library</h2> 
    </div>  
    <div class="span4"> 
    <%= will_paginate @mybooks, class: "pagination pagination-right" %> 
    </div> 
</div> 

這裏是的jsfiddle：

http://jsfiddle.net/V7CVE/2/

我使用的是標準的非定製引導2，我需要搜索框，頁面標題和分頁鏈接彼此垂直對齊。

Answer 1

我不熟悉ruby語法，但從概念上說這不應該有所作爲。他們沒有對齊的原因是引導程序有不同的元素的默認CSS。您只需要通過覆蓋這些引導樣式來微調每個元素。 應用以下款式：

.form-search { 
    margin: 15px 0 0 0; 
} 

.pagination { 
    margin: 15px 0; 
}