गटर करतात

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

ह्या पानाचेर

ते कशे काम करतात

गटर म्हळ्यार स्तंभ आशयामदीं आशिल्लीं अंतरां, आडव्यान तयार केल्लीं 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वांगडा the भोंवतणी एक आवरण जोडप:.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.

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

.कोल-स्म-6 .कोल-मड-8

.कोल-6 .कोल-एमडी-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,
);