Lưới kiểm tra biểu mẫu khởi động + đơn giản

Question

Tôi có danh sách 20 thẻ trở lên Tôi muốn hiển thị trong ô kiểm tra 4 cột nhưng tôi không chắc chắn cách tốt nhất để làm điều đó là gì. Tôi có dạng sau:

= 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' 

Dạng kết quả nên được một cái gì đó giống như http://jsfiddle.net/LVFzK/ này, nhưng tôi muốn có logic chỉ giới hạn trong một CSS wrapper hay chứ không phải bằng tay điều chỉnh HTML.

Answer 1

Nếu bạn thoát khỏi các yếu tố <div class="controls span2"> cột và thêm lớp span2 đến label yếu tố, các label sẽ có chiều rộng thiết lập và sẽ float trái. Điều này sẽ làm cho các hộp kiểm tra căn chỉnh với lưới.

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

Bạn có thể buộc các mạng lưới để có bốn-cột bằng cách thêm các lớp span10 đến yếu tố container:

<div class="control-group span10"> 

Tuy nhiên, điều này sẽ gây ra các lưới chảy trái -> phải và sau đó tạo các hàng mới thay vì các phần tử liên tiếp được xếp chồng lên nhau theo chiều dọc. Cách duy nhất tôi có thể nghĩ là có các phần tử được xếp chồng lên nhau theo chiều dọc là sử dụng multi-column layout functionality. Tôi đã không sử dụng điều này trước đây, và tôi không thực sự biết nó hoạt động tốt như thế nào trong các trình duyệt khác nhau.

Điều này jsFiddle hiển thị hai phương pháp tiếp cận, mỗi phương pháp có chiều rộng tĩnh hoặc chiều rộng chất lỏng.