कॉलम के बीच की जगह के साथ मेरे पास समान मुद्दे थे। मूल समस्या यह है कि बूटस्ट्रैप 3 और 4 में कॉलम मार्जिन के बजाय पैडिंग का उपयोग करते हैं। तो दो आसन्न स्तंभों के लिए पृष्ठभूमि रंग एक दूसरे को स्पर्श करते हैं।
मुझे एक ऐसा समाधान मिला जो हमारी समस्या को ठीक करता है और अधिकांश लोगों के लिए अंतरिक्ष स्तंभों की कोशिश करने वाले और ग्रिड प्रणाली के बाकी हिस्सों के समान गटर की चौड़ाई बनाए रखने के लिए काम करेगा।
यह अंतिम परिणाम था जिसके लिए हम जा रहे थे
कॉलम के बीच ड्रॉप शैडो के साथ गैप होना समस्याजनक था। हम स्तंभों के बीच अतिरिक्त स्थान नहीं चाहते थे। हम बस चाहते थे कि गटर "पारदर्शी" हो, इसलिए साइट का पृष्ठभूमि रंग दो सफेद स्तंभों के बीच दिखाई देगा।
यह दो कॉलम के लिए मार्कअप है
<div class="row">
<div class="col-sm-7">
<div class="raised-block">
<h3>Facebook</h3>
</div>
</div>
<div class="col-sm-5">
<div class="raised-block">
<h3>Tweets</h3>
</div>
</div>
</div>
सीएसएस
.raised-block {
background-color: #fff;
margin-bottom: 10px;
margin-left: 0;
margin-right: -0.625rem; // for us 0.625rem == 10px
padding-left: 0.625rem;
padding-right: 0.625rem;
}
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack
.raised-block {
margin-left: -0.625rem;
}
}
.row [class^="col-"]:first-child>.raised-block {
// this is so the first column has no margin so it will not be "indented"
margin-left: -0.625rem;
}
इस दृष्टिकोण को "पंक्ति" वर्ग बूटस्ट्रैप उपयोगों की तरह ही नकारात्मक मार्जिन के साथ एक आंतरिक div की आवश्यकता होती है। और यह div, हमने इसे "उठाया-ब्लॉक" कहा, एक कॉलम का प्रत्यक्ष सिबलिंग होना चाहिए
इस तरह से आपको अपने कॉलम के अंदर उचित पैडिंग मिल जाती है। मैंने ऐसे समाधान देखे हैं जो अंतरिक्ष का निर्माण करके काम करते हैं, लेकिन दुर्भाग्य से वे जो कॉलम बनाते हैं उनमें पंक्ति के दोनों ओर अतिरिक्त पैडिंग होती है इसलिए यह पंक्ति को पतला बनाता है जिससे ग्रिड लेआउट के लिए डिज़ाइन किया गया था। यदि आप छवि को वांछित रूप में देखते हैं, तो इसका मतलब होगा कि दो स्तंभ एक साथ शीर्ष पर एक बड़े से छोटे होंगे जो ग्रिड की प्राकृतिक संरचना को तोड़ता है।
इस दृष्टिकोण के लिए प्रमुख दोष यह है कि इसके लिए प्रत्येक कॉलम की सामग्री को लपेटने वाले अतिरिक्त मार्कअप की आवश्यकता होती है। हमारे लिए यह काम करता है क्योंकि वांछित लुक को प्राप्त करने के लिए उनके बीच केवल विशिष्ट कॉलम के लिए जगह की आवश्यकता होती है।
