ගටර්ස්
බූට්ස්ට්රැප් ග්රිඩ් පද්ධතියේ ප්රතිචාරාත්මක ඉඩක් සහ අන්තර්ගතය පෙළගස්වා ගැනීමට භාවිත කරන, ඔබේ තීරු අතර ඇති පිරවුම ගටර්ස් වේ.
ඔවුන් වැඩ කරන ආකාරය
-
ගටර යනු තිරස් මඟින් නිර්මාණය කරන ලද තීරු අන්තර්ගතය අතර හිඩැස් වේ
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
වලින් සෘණ .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,
);