ಮುಖ್ಯ ವಿಷಯಕ್ಕೆ ತೆರಳಿ ಡಾಕ್ಸ್ ನ್ಯಾವಿಗೇಶನ್‌ಗೆ ತೆರಳಿ
Check
in English

ಗಟಾರಗಳು

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

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

  • ಗಟರ್‌ಗಳು ಕಾಲಮ್ ವಿಷಯದ ನಡುವಿನ ಅಂತರಗಳಾಗಿವೆ, ಇದನ್ನು ಸಮತಲದಿಂದ ರಚಿಸಲಾಗಿದೆ padding. ನಾವು ಪ್ರತಿ ಕಾಲಮ್‌ನಲ್ಲಿ ಹೊಂದಿಸಿದ್ದೇವೆ padding-rightಮತ್ತು ವಿಷಯವನ್ನು ಹೊಂದಿಸಲು ಪ್ರತಿ ಸಾಲಿನ ಪ್ರಾರಂಭ ಮತ್ತು ಕೊನೆಯಲ್ಲಿ ಅದನ್ನು ಸರಿದೂಗಿಸಲು ಋಣಾತ್ಮಕವನ್ನು ಬಳಸುತ್ತೇವೆ.padding-leftmargin

  • ಗಟಾರಗಳು 1.5rem( 24px) ಅಗಲದಿಂದ ಪ್ರಾರಂಭವಾಗುತ್ತವೆ. ಇದು ನಮ್ಮ ಗ್ರಿಡ್ ಅನ್ನು ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಮಾರ್ಜಿನ್ ಸ್ಪೇಸರ್ಸ್ ಸ್ಕೇಲ್‌ಗೆ ಹೊಂದಿಸಲು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ .

  • ಗಟರ್‌ಗಳನ್ನು ಸ್ಪಂದಿಸುವಂತೆ ಸರಿಹೊಂದಿಸಬಹುದು. ಅಡ್ಡಲಾಗಿರುವ ಗಟಾರಗಳು, ಲಂಬವಾದ ಗಟರ್‌ಗಳು ಮತ್ತು ಎಲ್ಲಾ ಗಟರ್‌ಗಳನ್ನು ಮಾರ್ಪಡಿಸಲು ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್-ನಿರ್ದಿಷ್ಟ ಗಟರ್ ವರ್ಗಗಳನ್ನು ಬಳಸಿ.

ಅಡ್ಡ ಗಟಾರಗಳು

.gx-*ಸಮತಲವಾದ ಗಟರ್ ಅಗಲಗಳನ್ನು ನಿಯಂತ್ರಿಸಲು ತರಗತಿಗಳನ್ನು ಬಳಸಬಹುದು. ಹೊಂದಾಣಿಕೆಯ ಪ್ಯಾಡಿಂಗ್ ಉಪಯುಕ್ತತೆಯನ್ನು ಬಳಸಿಕೊಂಡು ಅನಗತ್ಯ ಓವರ್‌ಫ್ಲೋ ಅನ್ನು ತಪ್ಪಿಸಲು ದೊಡ್ಡ ಗಟರ್‌ಗಳನ್ನು ಬಳಸಿದರೆ .containerಅಥವಾ ಪೋಷಕರನ್ನು ಸರಿಹೊಂದಿಸಬೇಕಾಗಬಹುದು. .container-fluidಉದಾಹರಣೆಗೆ, ಕೆಳಗಿನ ಉದಾಹರಣೆಯಲ್ಲಿ ನಾವು ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಹೆಚ್ಚಿಸಿದ್ದೇವೆ .px-4:

ಕಸ್ಟಮ್ ಕಾಲಮ್ ಪ್ಯಾಡಿಂಗ್
ಕಸ್ಟಮ್ ಕಾಲಮ್ ಪ್ಯಾಡಿಂಗ್
html
<div class="container px-4 text-center">
  <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:

ಕಸ್ಟಮ್ ಕಾಲಮ್ ಪ್ಯಾಡಿಂಗ್
ಕಸ್ಟಮ್ ಕಾಲಮ್ ಪ್ಯಾಡಿಂಗ್
html
<div class="container overflow-hidden text-center">
  <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:

ಕಸ್ಟಮ್ ಕಾಲಮ್ ಪ್ಯಾಡಿಂಗ್
ಕಸ್ಟಮ್ ಕಾಲಮ್ ಪ್ಯಾಡಿಂಗ್
ಕಸ್ಟಮ್ ಕಾಲಮ್ ಪ್ಯಾಡಿಂಗ್
ಕಸ್ಟಮ್ ಕಾಲಮ್ ಪ್ಯಾಡಿಂಗ್
html
<div class="container overflow-hidden text-center">
  <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ಹೊದಿಕೆ ವರ್ಗವನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿಲ್ಲ.

ಕಸ್ಟಮ್ ಕಾಲಮ್ ಪ್ಯಾಡಿಂಗ್
ಕಸ್ಟಮ್ ಕಾಲಮ್ ಪ್ಯಾಡಿಂಗ್
ಕಸ್ಟಮ್ ಕಾಲಮ್ ಪ್ಯಾಡಿಂಗ್
ಕಸ್ಟಮ್ ಕಾಲಮ್ ಪ್ಯಾಡಿಂಗ್
html
<div class="container text-center">
  <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>

ಸಾಲು ಕಾಲಮ್‌ಗಳು ಗಟಾರಗಳು

ಸಾಲು ಕಾಲಮ್‌ಗಳಿಗೆ ಗಟರ್ ತರಗತಿಗಳನ್ನು ಕೂಡ ಸೇರಿಸಬಹುದು . ಕೆಳಗಿನ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಸ್ಪಂದಿಸುವ ಸಾಲು ಕಾಲಮ್‌ಗಳು ಮತ್ತು ಸ್ಪಂದಿಸುವ ಗಟರ್ ವರ್ಗಗಳನ್ನು ಬಳಸುತ್ತೇವೆ.

ಸಾಲು ಕಾಲಮ್
ಸಾಲು ಕಾಲಮ್
ಸಾಲು ಕಾಲಮ್
ಸಾಲು ಕಾಲಮ್
ಸಾಲು ಕಾಲಮ್
ಸಾಲು ಕಾಲಮ್
ಸಾಲು ಕಾಲಮ್
ಸಾಲು ಕಾಲಮ್
ಸಾಲು ಕಾಲಮ್
ಸಾಲು ಕಾಲಮ್
html
<div class="container text-center">
  <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ಸೇರಿಸಿ .mx-0..row

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

.col-sm-6 .col-md-8
.col-6 .col-md-4
html
<div class="row g-0 text-center">
  <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,
);