跨引导 div 跨度垂直对齐答案

【问题标题】：vertical align across bootstrap div span跨引导 div 跨度垂直对齐
【发布时间】：2012-12-20 10:04:12
【问题描述】：

我在我的应用程序上使用引导程序，并且很难使用引导程序垂直对齐某些项目。它由一个引导行和 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，我需要搜索框、页面标题和分页链接彼此垂直对齐。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

我不熟悉 ruby 语法，但从概念上讲，这应该没什么区别。它们未对齐的原因是 bootstrap 对不同的元素有自己的默认 css。您只需要通过覆盖这些引导样式来微调每个元素。应用以下样式：

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

.pagination {
    margin: 15px 0;
}

【讨论】：