부트 스트랩 + 간단한 폼 체크 박스 그리드

Question

4 컬럼 체크 박스 그리드에 표시하고 싶은 20 개 이상의 태그 목록이 있습니다.하지만 가장 확실한 방법은 무엇인지 잘 모르겠습니다. 나는 다음과 같은 형식이 : 결과 형식이 http://jsfiddle.net/LVFzK/과 같이해야한다

= simple_form_for(@fracture) do |f| 
    = f.error_notification  
    .form-inputs 
    = f.input :title 
    = f.input :summary 
    = f.input :tag_list, :as => :check_boxes, :collection => ActsAsTaggableOn::Tag.all.map(&:name), :item_wrapper_class => 'inline' 

을하지만 수동으로 HTML을 수정보다는 wrapper 또는 CSS에 국한 논리를 갖고 싶습니다. 당신이 <div class="controls span2"> 열 요소를 제거하기와 label 요소에 span2 클래스를 추가하는 경우

Answer 1

의 label는 일련의 폭을해야합니다 왼쪽 떠. 그러면 체크 상자가 모눈에 정렬됩니다. 당신은 컨테이너 요소에 span10 클래스를 추가하여 네 기둥으로 그리드를 강제 할 수

<label class="checkbox span2"> 
    <input type="checkbox" value="option1"> Cash 
</label> 

:

그러나

<div class="control-group span10"> 

,이 그리드의 원인이됩니다이 왼쪽 흐름 -> 오른쪽 연속 된 요소 대신 세로로 쌓인 새로운 행을 만듭니다. 요소를 세로로 쌓아 올릴 수있는 유일한 방법은 multi-column layout functionality을 사용하는 것입니다. 이전에는 이것을 사용하지 않았지만 실제로 다양한 브라우저에서 얼마나 잘 작동하는지 알지 못합니다.

이 jsFiddle은 정적 폭 또는 유체 폭을 각각 갖는 두 가지 방법을 보여줍니다.