ගටර්ස්

බූට්ස්ට්‍රැප් ග්‍රිඩ් පද්ධතියේ ප්‍රතිචාරාත්මක ඉඩක් සහ අන්තර්ගතය පෙළගස්වා ගැනීමට භාවිත කරන, ඔබේ තීරු අතර ඇති පිරවුම ගටර්ස් වේ.

මෙම පිටුවේ

ඔවුන් වැඩ කරන ආකාරය

ගටර යනු තිරස් මඟින් නිර්මාණය කරන ලද තීරු අන්තර්ගතය අතර හිඩැස් වේ 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. මෙය සියලුම ක්ෂණික ළමා තීරු marginවලින් සෘණ .rowසහ තිරස් ඉවත් කරයි.padding

කෙළවරේ සිට කෙළවරට නිර්මාණයක් අවශ්‍යද? මාපියන් අතහරින්න .containerහෝ .container-fluid.

ප්රායෝගිකව, එය පෙනෙන ආකාරය මෙන්න. (තීරු පළල, ප්‍රතිචාරාත්මක ස්ථර, නැවත ඇණවුම් සහ තවත් දේ ඇතුළුව) අනෙකුත් සියලුම පෙරනිමි ජාල පන්ති සමඟින් ඔබට මෙය දිගටම භාවිතා කළ හැකි බව සලකන්න.

.col-sm-6 .col-md-8

.col-6 .col-md-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,
);