पंक्तियों में 12-कॉलम की सीमा को तोड़ने के लिए बूटस्ट्रैप 3 को अनुकूलित करना

समस्या

डिफ़ॉल्ट रूप से, बूटस्ट्रैप 3 12 इकाइयों से अधिक कॉलम को स्टैक करने के लिए बाध्य करता है उनके "फ्लोट: कोई नहीं" व्यवहार के कारण लंबवत। यह सीमा गतिशील लेआउट में बाधा उत्पन्न कर सकती है जहां एक पंक्ति में कई सामग्री ब्लॉक जोड़े जा सकते हैं। 12 से अधिक कॉलम. यहां बताया गया है:

/* बड़े कॉलम समूहों के लिए col-xs फ्लोट फिक्स */ .बड़ा-समूह .col-xs-12 { नाव छोड़ी; } /* बड़े कॉलम समूहों के लिए col-sm फ्लोट फिक्स */ @मीडिया (न्यूनतम-चौड़ाई: 768px) { .बड़ा-समूह .col-sm-12 { नाव छोड़ी; } } /* बड़े कॉलम समूहों के लिए col-md फ्लोट फिक्स */ @मीडिया (न्यूनतम-चौड़ाई: 992px) { .बड़ा-समूह .col-md-12 { नाव छोड़ी; } } /* बड़े कॉलम समूहों के लिए col-lg फ्लोट फिक्स */ @मीडिया (न्यूनतम-चौड़ाई: 1200px) { .बड़ा-समूह .col-lg-12 { नाव छोड़ी; } }

कार्यान्वयन उदाहरण

/* col-xs float fix for large column groups */
.large-group .col-xs-12 {
  float: left;
}

/* col-sm float fix for large column groups */
@media (min-width: 768px) {
  .large-group .col-sm-12 {
    float: left;
  }
}

/* col-md float fix for large column groups */
@media (min-width: 992px) {
  .large-group .col-md-12 {
    float: left;
  }
}

/* col-lg float fix for large column groups */
@media (min-width: 1200px) {
  .large-group .col-lg-12 {
    float: left;
  }
}

तर्कसंगतीकरण

  

    
col 9
    
col 3
    
col 12