गटर करतात
गटर हें तुमच्या स्तंभांमदलें पॅडींग आसा, जें बूटस्ट्रॅप ग्रिड प्रणालींत प्रतिसाद दिवन जागो आनी सामुग्री संरेखित करपाक वापरतात.
ते कशे काम करतात
-
गटर म्हळ्यार स्तंभ आशयामदीं आशिल्लीं अंतरां, आडव्यान तयार केल्लीं
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
वांगडा 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
. हाका लागून सगळ्या तात्काळ भुरग्यांच्या स्तंभांतल्यान नकारात्मक 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,
);