ጉድጓዶች

ጉተራዎች በአምዶችዎ መካከል ያሉ ንጣፎች ናቸው፣ ምላሽ ሰጪ በሆነ መልኩ ቦታ ለማስያዝ እና በBootstrap ግሪድ ስርዓት ውስጥ ያለውን ይዘት ለማስተካከል ያገለግላሉ።

በዚህ ገጽ ላይ

እንዴት እንደሚሠሩ

ጉድጓዶች በአምድ ይዘት መካከል ያሉ ክፍተቶች ናቸው, በአግድም የተፈጠሩ padding. በእያንዳንዱ ረድፍ ላይ እናስቀምጣለን padding-rightእና በእያንዳንዱ ረድፍ መጀመሪያ እና መጨረሻ ላይ ያለውን ይዘት ለማካካስ padding-leftአሉታዊ እንጠቀማለን.margin
ጉድጓዶች የሚጀምሩት 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። ይህ አሉታዊውን margins ከ .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,
);