부트 스트랩 div 스팬을 가로 지르는 수직 정렬

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 

이 레일 코드 :

이

이 골격이다

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

내가 정의되지 않은 표준을 사용하고 있습니다 : 여기

<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입니다 부트 스트랩 2, 그리고 검색 상자, 페이지 제목 및 페이지 네이션 링크는 서로 수직으로 정렬된다.

Answer 1

저는 Ruby 구문에 익숙하지 않지만 개념적으로 차이가 없어야합니다. 그들이 정렬되지 않은 이유는 부트 스트랩이 다른 요소에 대해 고유 한 기본 CSS를 가지고 있기 때문입니다. 이 부트 스트랩 스타일을 오버라이드하여 각 요소를 미세 조정할 필요가 있습니다. 다음 스타일 적용 :

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

.pagination { 
    margin: 15px 0; 
}