ಗಟಾರಗಳು

ಗಟರ್‌ಗಳು ನಿಮ್ಮ ಕಾಲಮ್‌ಗಳ ನಡುವಿನ ಪ್ಯಾಡಿಂಗ್ ಆಗಿದ್ದು, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಗ್ರಿಡ್ ಸಿಸ್ಟಂನಲ್ಲಿ ಸ್ಪಂದಿಸುವ ಸ್ಥಳ ಮತ್ತು ವಿಷಯವನ್ನು ಜೋಡಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ.

ಈ ಪುಟದಲ್ಲಿ

ಅವರು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತಾರೆ

ಗಟರ್‌ಗಳು ಕಾಲಮ್ ವಿಷಯದ ನಡುವಿನ ಅಂತರಗಳಾಗಿವೆ, ಇದನ್ನು ಸಮತಲದಿಂದ ರಚಿಸಲಾಗಿದೆ 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ಸೇರಿಸುವುದು .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.

ಪ್ರಾಯೋಗಿಕವಾಗಿ, ಅದು ಹೇಗೆ ಕಾಣುತ್ತದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ. ಎಲ್ಲಾ ಇತರ ಪೂರ್ವನಿರ್ಧರಿತ ಗ್ರಿಡ್ ತರಗತಿಗಳೊಂದಿಗೆ (ಕಾಲಮ್ ಅಗಲಗಳು, ಸ್ಪಂದಿಸುವ ಶ್ರೇಣಿಗಳು, ಮರುಕ್ರಮಗೊಳಿಸುವಿಕೆಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳನ್ನು ಒಳಗೊಂಡಂತೆ) ನೀವು ಇದನ್ನು ಬಳಸುವುದನ್ನು ಮುಂದುವರಿಸಬಹುದು ಎಂಬುದನ್ನು ಗಮನಿಸಿ.

.col-sm-6 .col-md-8

.col-6 .col-md-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,
);