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