यहाँ एक और विकल्प है जो मैं पिछले कुछ समय से उपयोग कर रहा हूँ। यह मेरे लिए बहुत अच्छा काम करता है क्योंकि मुझे ज्यादातर 2 अलग-अलग कॉलोनों की जरूरत होती है। और यह उत्तरदायी भी है। जिसका अर्थ है कि यदि मेरे पास मध्यम और बड़े स्क्रीन आकारों में एक-दूसरे के बगल में कॉलम हैं, तो मैं कक्षा का उपयोग करूंगा col-md-border, जो छोटे स्क्रीन आकारों पर विभाजक को छिपाएगा।
सीएसएस:
@media (min-width: 992px) {
.col-md-border:not(:last-child) {
border-right: 1px solid #d7d7d7;
}
.col-md-border + .col-md-border {
border-left: 1px solid #d7d7d7;
margin-left: -1px;
}
}
Scss में आप शायद इससे सभी आवश्यक कक्षाएं उत्पन्न कर सकते हैं:
एससीएसएस:
@media(min-width: $screen-md-min) {
.col-md-border {
&:not(:last-child) {
border-right: 1px solid #d7d7d7;
}
& + .col-md-border {
border-left: 1px solid #d7d7d7;
margin-left: -1px;
}
}
}
HTML:
<div class="row">
<div class="col-md-6 col-md-border"></div>
<div class="col-md-6 col-md-border"></div>
</div>
यह काम किस प्रकार करता है:
कर्नल एक ऐसे तत्व के अंदर होना चाहिए जहां कोई अन्य बछड़े नहीं हैं अन्यथा चयनकर्ता अपेक्षा के अनुरूप काम नहीं कर सकते हैं।
.col-md-border:not(:last-child)मेल खाता है, लेकिन अंतिम तत्व से पहले .row करीब है और इसे सही सीमा जोड़ता है।
.col-md-border + .col-md-borderयदि ये दोनों एक दूसरे के बगल में हों और बाएं बॉर्डर और -1px नेगेटिव मार्जिन जोड़ते हैं तो एक ही क्लास के साथ दूसरी डीवाई से मेल खाता है। नकारात्मक मार्जिन यही है कि इससे कोई फर्क नहीं पड़ता कि किस कॉलम की ऊंचाई अधिक है और विभाजक 1px उच्चतम कॉलम वाला ऊंचाई होगा।
इसमें कुछ समस्याएं भी हैं ...
- जब आप चालाक / आलसी होने की कोशिश करते हैं
col-XX-Xऔर एक ही पंक्ति तत्व के अंदर hidden-XX/ visible-XXवर्गों के साथ मिलकर कक्षा का उपयोग करते हैं ।
- जब आपके पास बहुत सारे कॉलम हों और आपको एक पिक्सेल सही चीज़ की आवश्यकता हो। चूँकि यह n-1 कॉलम 1px को बाईं ओर ले जाता है।
... लेकिन दूसरी ओर यह उत्तरदायी है, सरल HTML के लिए बहुत अच्छा काम करता है और सभी बूटस्ट्रैप स्क्रीन आकारों के लिए इन कक्षाओं को बनाना आसान है।