ގަޓަރސް އެވެ

އެމީހުން މަސައްކަތްކުރާ ގޮތް

• ގަޓަރސް އަކީ ކޮލަމް ކޮންޓެންޓް އާއި ދެމެދު ހުންނަ ވަކިތަކެއް، ހޮރައިޒޮންޓަލް އިން އުފައްދާ އެއްޗެކެވެ padding. އަޅުގަނޑުމެން ކޮންމެ ކޮލަމެއްގައި padding-rightއަދި ސެޓްކޮށް ، ކޮންޓެންޓް އެލައިން ކުރުމަށް ކޮންމެ ރޯއެއްގެ ފެށުމާއި ނިމުމުގައި އެކަން އޮފްސެޓް ކުރުމަށް ނެގެޓިވް ބޭނުންކުރަމެވެ.padding-leftmargin

• ގަޓަރުތައް ފެށެނީ 1.5rem( 24px) ވައިޑް އިންނެވެ. މިއީ އަޅުގަނޑުމެންގެ ގްރިޑް ޕެޑިންގ އަދި މާރޖިން ސްޕޭސަރސް ސްކޭލް އާއި އެއްގޮތް ކުރެވޭނެ ގޮތެކެވެ.

• ގަޓަރުތައް ރެސްޕޮންސިވްކޮށް އެޖެސްޓް ކުރެވޭނެ އެވެ. ހޮރައިޒޮންޓަލް ގަޓަރުތަކާއި، ވަރުގަދަ ގަޓަރުތަކާއި، ހުރިހާ ގަޓަރެއް ބަދަލުކުރުމަށް ބްރޭކްޕޮއިންޓަށް ޚާއްޞަ ގަޓަރ ކްލާސްތައް ބޭނުންކުރުން.

ހޮރައިޒޮންޓަލް ގަޓަރުތަކެވެ

.gx-*ކްލާސްތައް ބޭނުންކޮށްގެން ހޮރައިޒޮންޓަލް ގަޓަރުގެ ފުޅާމިންތައް ކޮންޓްރޯލް ކުރެވިދާނެ އެވެ. މެޗިންގ ޕެޑިންގ ޔުޓިލިޓީއެއް ބޭނުންކޮށްގެން، ނޭދެވޭ ގޮތުގައި އޯވަރފްލޯ ނުވުމަށްޓަކައި ބޮޑެތި ގަޓަރުތައް ވެސް ބޭނުންކުރާނަމަ .containerނުވަތަ .container-fluidބެލެނިވެރިޔާ އެޖެސްޓް ކުރަން ޖެހިދާނެއެވެ. މިސާލަކަށް ތިރީގައިވާ މިސާލުގައި އަޅުގަނޑުމެން ޕެޑިންގ އިތުރުކޮށްފައިވަނީ .px-4:

<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

<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:

<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ކްލާސްތައް ބޭނުންކޮށްގެން ހޮރައިޒޮންޓަލް ގަޓަރ ވިޑްތްސް ކޮންޓްރޯލް ކުރެވިދާނެ، ތިރީގައިވާ މިސާލަށް އަޅުގަނޑުމެން ބޭނުންކުރަނީ ކުޑަ ގަޓަރ ވިޑްތް، އެހެންކަމުން ރެޕަރ ކްލާސް އިތުރު ކުރުމުގެ ބޭނުމެއް ނުޖެހޭނެއެވެ .

<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>

ރޯ ކޮލަމްސް ގަޓަރސް

އަދި ރޯ ކޮލަމްތަކަށް ގަޓަރ ކްލާސްތައް އިތުރުކުރެވިދާނެއެވެ . ތިރީގައިވާ މިސާލުގައި އަޅުގަނޑުމެން ބޭނުންކުރަނީ ރެސްޕޮންސިވް ރޯ ކޮލަމްތަކާއި ރެސްޕޮންސިވް ގަޓަރ ކްލާސްތަކެވެ.

<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. މިއީ ވަގުތީ ހުރިހާ ކުދިންގެ ކޮލަމްތަކުން ނެގެޓިވް margins .rowއަދި ހޮރައިޒޮންޓަލް ނައްތާލާ ކަމެކެވެ .padding

އެޖް ޓު އެޖް ޑިޒައިންއެއް ބޭނުންވޭތަ؟ ބެލެނިވެރިޔާ .containerނުވަތަ އަދި އޯވަރފްލޯ ނުވުމަށްޓަކައި އެއަށް .container-fluidއިތުރުކޮށްލާށެވެ ..mx-0.row

ޢަމަލީގޮތުން ބަލާއިރު މިއޮތީ އެކަން ފެންނަ ގޮތެވެ. ނޯޓް ކުރިން ކަނޑައެޅިފައިވާ އެހެން ހުރިހާ ގްރިޑް ކްލާސްތަކާއެކު (ކޮލަމް ފުޅާމިން، ރެސްޕޮންސިވް ޓިއަރސް، ރީއޯޑަރސް، އަދި އެހެނިހެން ހިމެނޭގޮތަށް) މިކަން ބޭނުން ކުރަމުން ގެންދެވޭނެއެވެ.

<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,
);