0

アプリケーションでブートストラップを使用していますが、ブートストラップを使用して一部のアイテムを垂直方向に整列させるのに苦労しています。これは、1つのブートストラップ行と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

これはレールコードです：

<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を使用していますが、検索ボックス、ページタイトル、およびページネーションリンクを互いに垂直方向に揃える必要があります。

4

1 に答える 1

1

私はルビーの構文に精通していませんが、概念的にはこれで違いはありません。それらが整列されていない理由は、ブートストラップがさまざまな要素に対して独自のデフォルトのcssを持っているためです。これらのブートストラップスタイルをオーバーライドして、各要素を微調整する必要があります。次のスタイルを適用します。

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

.pagination {
    margin: 15px 0;
}
于 2012-12-20T02:04:12.653 に答える