गटार

गटर हे तुमच्या स्तंभांमधील पॅडिंग आहेत, ज्याचा वापर बूटस्ट्रॅप ग्रिड प्रणालीमध्ये प्रतिसादात्मकपणे जागा आणि सामग्री संरेखित करण्यासाठी केला जातो.

या पृष्ठावर

ते कसे काम करतात

गटर हे स्तंभ सामग्रीमधील अंतर आहेत, क्षैतिज द्वारे तयार केलेले padding. आम्ही प्रत्येक स्तंभावर padding-rightआणि सेट करतो, आणि सामग्री संरेखित करण्यासाठी प्रत्येक पंक्तीच्या सुरूवातीस आणि शेवटी ऑफसेट करण्यासाठी नकारात्मक वापरतो.padding-leftmargin
गटर 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. हे सर्व तात्कालिक मुलांच्या स्तंभांमधील नकारात्मक margins .rowआणि क्षैतिज काढून टाकते.padding

एज-टू-एज डिझाइनची आवश्यकता आहे? .containerपालक किंवा ड्रॉप करा .container-fluid.

सराव मध्ये, ते कसे दिसते ते येथे आहे. लक्षात ठेवा तुम्ही हे इतर सर्व पूर्वनिर्धारित ग्रिड वर्गांसह वापरणे सुरू ठेवू शकता (स्तंभ रुंदी, प्रतिसादात्मक स्तर, पुनर्क्रमण आणि अधिकसह).

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

.col-6 .col-md-4

<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,
);