垂直对齐引导程序跨度

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; 
}