बूटस्ट्रैप 4 में ग्रिड कॉलम से पैडिंग गटर को हटाकर

Question

बूटस्ट्रैप 4 में आप गटरलेस ग्रिड कैसे बनाते हैं?

क्या गटर को हटाने के लिए कोई आधिकारिक API है या यह मैनुअल है?

Answer 1

बूटस्ट्रैप 4: बॉक्स के बाहर .no-gutters के साथ आता है। स्रोत: https://github.com/twbs/bootstrap/pull/21211/files

Bootstrap3:

कस्टम सीएसएस की आवश्यकता है।

स्टाइल शीट:

.row.no-gutters { 
    margin-right: 0; 
    margin-left: 0; 

    & > [class^="col-"], 
    & > [class*=" col-"] { 
    padding-right: 0; 
    padding-left: 0; 
    } 
} 

तब उपयोग करने के लिए:

<div class="row no-gutters"> 
    <div class="col-xs-4">...</div> 
    <div class="col-xs-4">...</div> 
    <div class="col-xs-4">...</div> 
</div> 

यह होगा:

• मार्जिन पंक्ति से सभी स्तंभों से सीधे नीचे निकालें
• निकालें गद्दी पंक्ति

Answer 2

आप बूटस्ट्रैप में गटरलेस ग्रिड प्राप्त करने के लिए इस सीएसएस कोड का उपयोग कर सकते हैं।

.no-gutter.row, 
.no-gutter.container, 
.no-gutter.container-fluid{ 
    margin-left: 0; 
    margin-right: 0; 
} 

.no-gutter>[class^="col-"]{ 
    padding-left: 0; 
    padding-right: 0; 
} 

Answer 3

आप mixin make-col-ready का उपयोग करें और शून्य करने के लिए गटर चौड़ाई सेट कर सकते हैं:

@include make-col-ready(0);

Answer 4

आवश्यकता बढ़त से किनारे डिजाइन? पैरेंट .container या .container-fluid ड्रॉप करें।

फिर भी आप अपने खुद के सीएसएस फ़ाइल के लिए ऊपर .row और तत्काल बच्चे कॉलम आप @Brian से कोड के साथ वर्ग .no-gutters जोड़ने के लिए से गद्दी को दूर करने की आवश्यकता है, वास्तव में यह नहीं 'सही बॉक्स से बाहर' है, अंतिम बूटस्ट्रैप 4 रिलीज पर आधिकारिक विवरण के लिए यहां देखें: https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters