9
मैं ऐसी स्थिति में भाग गया जहां मुझे पंक्ति में कॉलम की संख्या सीमित नहीं करने की आवश्यकता थी क्योंकि व्यवस्थापक के स्थानों से क्षेत्र में संभावित रूप से सामग्री के कई ब्लॉक जोड़े जाएंगे।बूटस्ट्रैप 3 - एक पंक्ति में 12 से अधिक कॉलम
डिफ़ॉल्ट रूप से बीएस 3 का व्यवहार 12 कॉलम divs को फ्लोट नहीं करता है जो उन्हें छोटे फ्लोटेड divs के शीर्ष पर जाने का कारण बनता है। इसलिए मैंने अपने सिस्टम के लिए एक कक्षा के रूप में ओवरराइड लिखा है और सोचा है कि अगर किसी और के पास कोई समस्या हो तो मैं साझा करूंगा।
अगर किसी के पास कोई बेहतर विचार या सुझाव है तो मुझे लगता है कि मैं बूटस्ट्रैप हैकिंग नहीं कर रहा हूं ... लेकिन यहां मैंने इसे हल किया है।
/* 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;
}
}
<div class="container">
<div class="row large-group" style="background-color:#ebebeb;">
<div class="col-xs-9"><div style="background-color:#babeee;"><p>col 9</p></div></div>
<div class="col-xs-3"><div style="background-color:#fefeeb;"><p>col 3</p></div></div>
<div class="col-xs-12"><div style="background-color:#bada55;"><p>col 12</p></div></div>
</div>
</div>
अपना कोड "कोड" लपेटें – LorDex