बूटस्ट्रैप + सरल रूप चेकबॉक्स ग्रिड

Question

मेरे पास 20+ टैग्स की एक सूची है जो मैं 4 कॉलम चेकबॉक्स ग्रिड में प्रस्तुत करना चाहता हूं लेकिन मुझे पूरा यकीन नहीं है कि यह करने का सबसे साफ तरीका क्या है। मैं निम्नलिखित रूप है:

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

जिसके परिणामस्वरूप प्रपत्र इस http://jsfiddle.net/LVFzK/ की तरह कुछ होना चाहिए, लेकिन मैं तर्क मैन्युअल एचटीएमएल को संशोधित करने के बजाय एक wrapper या CSS में सीमित करना चाहते हैं।

Answer 1

आप <div class="controls span2"> स्तंभ तत्वों से छुटकारा पाने और label तत्वों को span2 वर्ग जोड़ते हैं, तो label एक सेट चौड़ाई है और छोड़ दिया तैर सकती है। यह चेक बॉक्स को ग्रिड में संरेखित करने का कारण बनता है।

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

आप कंटेनर तत्व को span10 वर्ग जोड़कर चार स्तंभों होने के लिए ग्रिड के लिए मजबूर कर सकते हैं:

<div class="control-group span10"> 

हालांकि, इस ग्रिड का कारण होगा छोड़ दिया प्रवाह के लिए -> सही और फिर लगातार तत्वों को लंबवत रूप से ढेर किए जाने के बजाय नई पंक्तियां बनाएं। एकमात्र तरीका मैं सोच सकता हूं कि तत्वों को लंबवत रूप से ढंका हुआ है multi-column layout functionality का उपयोग करना। मैंने पहले इसका उपयोग नहीं किया है, और मुझे वास्तव में पता नहीं है कि यह विभिन्न ब्राउज़रों में कितनी अच्छी तरह से काम करता है।

यह jsFiddle दो दृष्टिकोण दिखाता है, प्रत्येक में स्थिर चौड़ाई या तरल चौड़ाई होती है।