गटार

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

या पृष्ठावर

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

गटर हे स्तंभ सामग्रीमधील अंतर आहेत, क्षैतिज द्वारे तयार केलेले padding. आम्ही प्रत्येक स्तंभावर padding-rightआणि सेट करतो, आणि सामग्री संरेखित करण्यासाठी प्रत्येक पंक्तीच्या सुरूवातीस आणि शेवटी ऑफसेट करण्यासाठी नकारात्मक वापरतो.padding-leftmargin
गटर 1.5rem( 24px) रुंद पासून सुरू होतात. हे आम्हाला आमची ग्रिड पॅडिंग आणि मार्जिन स्पेसर स्केलशी जुळवण्यास अनुमती देते .
गटर प्रतिसादात्मकपणे समायोजित केले जाऊ शकतात. क्षैतिज गटर, उभ्या गटर आणि सर्व गटर सुधारण्यासाठी ब्रेकपॉईंट-विशिष्ट गटर वर्ग वापरा.

आडवे गटर

.gx-*क्षैतिज गटर रुंदी नियंत्रित करण्यासाठी वर्ग वापरले जाऊ शकतात. जुळणारी पॅडिंग युटिलिटी वापरून, अवांछित ओव्हरफ्लो टाळण्यासाठी मोठ्या गटरचा वापर केला जात असल्यास .containerकिंवा .container-fluidपालकांना समायोजित करण्याची आवश्यकता असू शकते. उदाहरणार्थ, खालील उदाहरणामध्ये आम्ही यासह पॅडिंग वाढविले आहे .px-4:

सानुकूल स्तंभ पॅडिंग

html

<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:

सानुकूल स्तंभ पॅडिंग

html

<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:

सानुकूल स्तंभ पॅडिंग

html

<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क्षैतिज गटर रुंदी नियंत्रित करण्यासाठी वर्ग वापरले जाऊ शकतात, खालील उदाहरणासाठी आम्ही लहान गटर रुंदी वापरतो, त्यामुळे रॅपर वर्ग जोडण्याची आवश्यकता नाही .

सानुकूल स्तंभ पॅडिंग

html

<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>

रांग स्तंभ गटर

गटर वर्ग देखील पंक्तीच्या स्तंभांमध्ये जोडले जाऊ शकतात . खालील उदाहरणामध्ये, आम्ही प्रतिसादात्मक पंक्ती स्तंभ आणि प्रतिसाद गटर वर्ग वापरतो.

ओळ स्तंभ

html

<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

html

<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>

गटर बदला

सास नकाशावरून वर्ग तयार केले जातात जे $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,
);