ގަޓަރސް އެވެ

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

މި ޞަފްޙާގައެވެ

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

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

އެޖް ޓު އެޖް ޑިޒައިންއެއް ބޭނުންވޭތަ؟ ބެލެނިވެރިޔާ .containerނުވަތަ .container-fluid.

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

.ކޮލް-އެސްއެމް-6 .ކޮލް-އެމްޑީ-8

.ކޮލް-6 .ކޮލް-އެމްޑީ-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,
);