ទឹកស្អុយ

Gutters គឺជាចន្លោះរវាងជួរឈររបស់អ្នក ដែលប្រើដើម្បីឆ្លើយតបចន្លោះ និងតម្រឹមមាតិកានៅក្នុងប្រព័ន្ធក្រឡាចត្រង្គ Bootstrap ។

នៅលើទំព័រនេះ។

របៀបដែលពួកគេធ្វើការ

Gutters គឺជាចន្លោះរវាងមាតិកាជួរឈរ ដែលបង្កើតដោយផ្ដេក padding។ យើងកំណត់ padding-rightនិង padding-leftនៅលើជួរនីមួយៗ ហើយប្រើអវិជ្ជមាន marginដើម្បីទូទាត់ថានៅដើម និងចុងជួរនីមួយៗ ដើម្បីតម្រឹមមាតិកា។
ប្រឡាយចាប់ផ្តើមពី 1.5rem( 24px) ធំទូលាយ។ នេះអនុញ្ញាតឱ្យយើងផ្គូផ្គងក្រឡាចត្រង្គរបស់យើងទៅនឹង មាត្រដ្ឋាន ទ្រនាប់ និងរឹម spacers ។
Gutters អាចត្រូវបានកែតម្រូវដោយការឆ្លើយតប។ ប្រើថ្នាក់ប្រឡាយទឹកជាក់លាក់ ចំណុចបំបែក ដើម្បីកែប្រែប្រឡាយផ្តេក ប្រឡាយបញ្ឈរ និងប្រឡាយទាំងអស់។

បំពង់បង្ហូរទឹកផ្តេក

.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-*classes អាចត្រូវបានប្រើដើម្បីគ្រប់គ្រងទទឹង gutter ផ្ដេក សម្រាប់ឧទាហរណ៍ខាងក្រោម យើងប្រើទទឹង gutter តូចជាង ដូច្នេះវានឹងមិនចាំបាច់បន្ថែម .overflow-hiddenclass wrapper ទេ។

បន្ទះជួរឈរផ្ទាល់ខ្លួន

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>

ជួរជួរឈរលូ

ថ្នាក់ Gutter ក៏អាចត្រូវបានបន្ថែមទៅ ជួរជួរ ផងដែរ។ ក្នុងឧទាហរណ៍ខាងក្រោម យើងប្រើជួរឈរជួរដេកដែលឆ្លើយតប និងថ្នាក់ gutter ឆ្លើយតប។

ជួរឈរ

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. marginវាដក s អវិជ្ជមាន ចេញពី .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ផែនទី Sass ដែលត្រូវបានទទួលមរតកពី $spacersផែនទី Sass ។

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

ទឹកស្អុយ

របៀបដែលពួកគេធ្វើការ

បំពង់បង្ហូរទឹកផ្តេក

លូទឹកបញ្ឈរ

បំពង់បង្ហូរទឹកផ្ដេកនិងបញ្ឈរ

ជួរ​ជួរ​ឈរ​លូ

គ្មានលូ

ផ្លាស់ប្តូរទឹកស្អុយ

ជួរជួរឈរលូ