ጉድጓዶች
ጉተራዎች በአምዶችዎ መካከል ያሉ ንጣፎች ናቸው፣ ምላሽ ሰጪ በሆነ መልኩ ቦታ ለማስያዝ እና በBootstrap ግሪድ ስርዓት ውስጥ ያለውን ይዘት ለማስተካከል ያገለግላሉ።
እንዴት እንደሚሠሩ
-
ጉድጓዶች በአምድ ይዘት መካከል ያሉ ክፍተቶች ናቸው, በአግድም የተፈጠሩ
padding
. በእያንዳንዱ ረድፍ ላይ እናስቀምጣለንpadding-right
እና በእያንዳንዱ ረድፍ መጀመሪያ እና መጨረሻ ላይ ያለውን ይዘት ለማካካስpadding-left
አሉታዊ እንጠቀማለን.margin
-
ጉድጓዶች የሚጀምሩት
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
s ከ .row
እና አግድም padding
ከሁሉም የቅርብ ልጆች አምዶች ያስወግዳል።
ከጫፍ እስከ ጫፍ ንድፍ ይፈልጋሉ? ወላጅ .container
ወይም .container-fluid
.
በተግባር ፣ እንዴት እንደሚመስል እነሆ። ይህንን ከሌሎች አስቀድሞ ከተገለጹት የፍርግርግ ክፍሎች (የአምድ ስፋቶች፣ ምላሽ ሰጪ ደረጃዎች፣ ዳግም ማዘዣዎች እና ሌሎችንም ጨምሮ) መጠቀምዎን መቀጠል እንደሚችሉ ልብ ይበሉ።
<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,
);