ಗಟಾರಗಳು
ಗಟರ್ಗಳು ನಿಮ್ಮ ಕಾಲಮ್ಗಳ ನಡುವಿನ ಪ್ಯಾಡಿಂಗ್ ಆಗಿದ್ದು, ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಗ್ರಿಡ್ ಸಿಸ್ಟಂನಲ್ಲಿ ಸ್ಪಂದಿಸುವ ಸ್ಥಳ ಮತ್ತು ವಿಷಯವನ್ನು ಜೋಡಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ.
ಅವರು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತಾರೆ
-
ಗಟರ್ಗಳು ಕಾಲಮ್ ವಿಷಯದ ನಡುವಿನ ಅಂತರಗಳಾಗಿವೆ, ಇದನ್ನು ಸಮತಲದಿಂದ ರಚಿಸಲಾಗಿದೆ
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
ಗಳನ್ನು .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,
);