गटर
गटर आपके कॉलम के बीच की पैडिंग हैं, जिनका उपयोग बूटस्ट्रैप ग्रिड सिस्टम में सामग्री को प्रतिक्रियाशील रूप से स्थान और संरेखित करने के लिए किया जाता है।
वे कैसे काम करते हैं
-
गटर क्षैतिज द्वारा बनाए गए स्तंभ सामग्री के बीच अंतराल हैं
padding
। हम प्रत्येक कॉलम पर सेट करते हैं,padding-right
और सामग्री को संरेखित करने के लिए प्रत्येक पंक्ति के प्रारंभ और अंत में ऑफसेट करने केpadding-left
लिए नकारात्मक का उपयोग करते हैं।margin
-
गटर
1.5rem
(24px
) चौड़े से शुरू होते हैं। यह हमें अपने ग्रिड को पैडिंग और मार्जिन स्पेसर्स स्केल से मिलाने की अनुमति देता है। -
गटर को उत्तरदायी रूप से समायोजित किया जा सकता है। क्षैतिज गटर, लंबवत गटर और सभी गटर को संशोधित करने के लिए ब्रेकपॉइंट-विशिष्ट गटर कक्षाओं का उपयोग करें।
क्षैतिज गटर
.gx-*
क्षैतिज गटर चौड़ाई को नियंत्रित करने के लिए कक्षाओं का उपयोग किया जा सकता है। यदि मेलिंग पैडिंग उपयोगिता का उपयोग करके अवांछित अतिप्रवाह से बचने के लिए बड़े गटर का उपयोग किया जाता है, तो माता .container
- .container-fluid
पिता को समायोजित करने की आवश्यकता हो सकती है। उदाहरण के लिए, निम्नलिखित उदाहरण में हमने पैडिंग को बढ़ा दिया है .px-4
:
<div class="container px-4">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
.row
कक्षा के साथ एक रैपर जोड़ने का एक वैकल्पिक समाधान है .overflow-hidden
:
<div class="container overflow-hidden">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
लंबवत गटर
.gy-*
कक्षाओं का उपयोग ऊर्ध्वाधर गटर की चौड़ाई को नियंत्रित करने के लिए किया जा सकता है। .row
क्षैतिज गटर की तरह, ऊर्ध्वाधर गटर पृष्ठ के अंत में कुछ अतिप्रवाह का कारण बन सकते हैं । .row
यदि ऐसा होता है, तो आप कक्षा के साथ एक रैपर जोड़ते हैं .overflow-hidden
:
<div class="container overflow-hidden">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
क्षैतिज और ऊर्ध्वाधर गटर
.g-*
.overflow-hidden
कक्षाओं का उपयोग क्षैतिज गटर की चौड़ाई को नियंत्रित करने के लिए किया जा सकता है, निम्नलिखित उदाहरण के लिए हम एक छोटी नाली की चौड़ाई का उपयोग करते हैं, इसलिए रैपर वर्ग को जोड़ने की आवश्यकता नहीं होगी ।
<div class="container">
<div class="row g-2">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
पंक्ति स्तंभ गटर
गटर क्लासेस को रो कॉलम में भी जोड़ा जा सकता है । निम्नलिखित उदाहरण में, हम रिस्पॉन्सिव रो कॉलम और रिस्पॉन्सिव गटर क्लासेस का उपयोग करते हैं।
<div class="container">
<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
</div>
</div>
कोई गटर नहीं
हमारे पूर्वनिर्धारित ग्रिड वर्गों में स्तंभों के बीच के गटर को .g-0
. यह सभी तत्काल चिल्ड्रन कॉलम से नकारात्मक margin
s .row
और क्षैतिज को हटा देता है।padding
एज-टू-एज डिज़ाइन की आवश्यकता है? माता-पिता को छोड़ें .container
या .container-fluid
.
व्यवहार में, यह कैसा दिखता है। ध्यान दें कि आप अन्य सभी पूर्वनिर्धारित ग्रिड वर्गों (स्तंभ की चौड़ाई, प्रतिक्रियाशील स्तरों, पुन: क्रम, और अधिक सहित) के साथ इसका उपयोग करना जारी रख सकते हैं।
<div class="row g-0">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
गटर बदलें
कक्षाएं Sass मानचित्र से बनाई गई हैं जो $gutters
Sass मानचित्र से विरासत में मिली है $spacers
।
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);