गटर

गटर आपके कॉलम के बीच की पैडिंग है, जिसका उपयोग बूटस्ट्रैप ग्रिड सिस्टम में सामग्री को प्रतिक्रियाशील रूप से स्थान और संरेखित करने के लिए किया जाता है।

इस पृष्ठ पर

वे कैसे काम करते हैं

गटर क्षैतिज द्वारा बनाए गए स्तंभ सामग्री के बीच अंतराल हैं padding। हम प्रत्येक कॉलम पर सेट करते हैं, padding-rightऔर सामग्री को संरेखित करने के लिए प्रत्येक पंक्ति के प्रारंभ और अंत में ऑफसेट करने के padding-leftलिए नकारात्मक का उपयोग करते हैं।margin
गटर 1.5rem( 24px) चौड़े से शुरू होते हैं। यह हमें हमारे ग्रिड को पैडिंग और मार्जिन स्पेसर्स स्केल से मिलाने की अनुमति देता है।
गटर को उत्तरदायी रूप से समायोजित किया जा सकता है। हॉरिजॉन्टल गटर, वर्टिकल गटर और सभी गटर को संशोधित करने के लिए ब्रेकपॉइंट-विशिष्ट गटर क्लासेस का उपयोग करें।

क्षैतिज गटर

.gx-*क्षैतिज गटर चौड़ाई को नियंत्रित करने के लिए कक्षाओं का उपयोग किया जा सकता है। यदि मेलिंग पैडिंग उपयोगिता का उपयोग करके अवांछित अतिप्रवाह से बचने के लिए बड़े गटर का उपयोग किया जाता है, तो माता .container- .container-fluidपिता को समायोजित करने की आवश्यकता हो सकती है। उदाहरण के लिए, निम्नलिखित उदाहरण में हमने पैडिंग को बढ़ा दिया है .px-4:

कस्टम कॉलम पैडिंग

एचटीएमएल

<div class="container px-4 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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 text-center">
  <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. यह सभी तत्काल चिल्ड्रन कॉलम से नकारात्मक margins .rowऔर क्षैतिज को हटा देता है।padding

एज-टू-एज डिज़ाइन की आवश्यकता है? माता-पिता को छोड़ दें .containerया अतिप्रवाह को रोकने के लिए .container-fluidजोड़ें ।.mx-0.row

व्यवहार में, यह कैसा दिखता है। ध्यान दें कि आप अन्य सभी पूर्वनिर्धारित ग्रिड वर्गों (स्तंभ की चौड़ाई, प्रतिक्रियाशील स्तरों, पुन: क्रम, और अधिक सहित) के साथ इसका उपयोग करना जारी रख सकते हैं।

.col-sm-6 .col-md-8

.col-6 .col-md-4

एचटीएमएल

<div class="row g-0 text-center">
  <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 मानचित्र से बनाई गई हैं जो $guttersSass मानचित्र से विरासत में मिली है $spacers।

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);