गटर के बा
गटर आपके कॉलम सभ के बीच के पैडिंग हवे, जेकर इस्तेमाल बूटस्ट्रैप ग्रिड सिस्टम में सामग्री के रिस्पांसिव तरीका से स्पेस आ संरेखित करे खातिर कइल जाला।
उ लोग कईसे काम करेला
-
गटर कॉलम सामग्री के बीच के अंतराल हवे, क्षैतिज द्वारा बनावल जाला
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>
गटर बदल के देखल जाव
कक्षा सभ के निर्माण सास नक्शा से कइल $gutters
जाला जे सास नक्शा से बिरासत में मिलल बा $spacers
।
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);