ទឹកស្អុយ
Gutters គឺជាចន្លោះរវាងជួរឈររបស់អ្នក ដែលប្រើដើម្បីឆ្លើយតបចន្លោះ និងតម្រឹមមាតិកានៅក្នុងប្រព័ន្ធក្រឡាចត្រង្គ Bootstrap ។
របៀបដែលពួកគេធ្វើការ
-
Gutters គឺជាចន្លោះរវាងមាតិកាជួរឈរ ដែលបង្កើតដោយផ្ដេក
padding
។ យើងកំណត់padding-right
និងpadding-left
នៅលើជួរនីមួយៗ ហើយប្រើអវិជ្ជមានmargin
ដើម្បីទូទាត់ថានៅដើម និងចុងជួរនីមួយៗ ដើម្បីតម្រឹមមាតិកា។ -
ប្រឡាយចាប់ផ្តើមពី
1.5rem
(24px
) ធំទូលាយ។ នេះអនុញ្ញាតឱ្យយើងផ្គូផ្គងក្រឡាចត្រង្គរបស់យើងទៅនឹង មាត្រដ្ឋាន ទ្រនាប់ និងរឹម spacers ។ -
Gutters អាចត្រូវបានកែតម្រូវដោយការឆ្លើយតប។ ប្រើថ្នាក់ប្រឡាយទឹកជាក់លាក់ ចំណុចបំបែក ដើម្បីកែប្រែប្រឡាយផ្តេក ប្រឡាយបញ្ឈរ និងប្រឡាយទាំងអស់។
បំពង់បង្ហូរទឹកផ្តេក
.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-*
classes អាចត្រូវបានប្រើដើម្បីគ្រប់គ្រងទទឹង gutter ផ្ដេក សម្រាប់ឧទាហរណ៍ខាងក្រោម យើងប្រើទទឹង gutter តូចជាង ដូច្នេះវានឹងមិនចាំបាច់បន្ថែម .overflow-hidden
class wrapper ទេ។
<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>
ជួរជួរឈរលូ
ថ្នាក់ Gutter ក៏អាចត្រូវបានបន្ថែមទៅ ជួរជួរ ផងដែរ។ ក្នុងឧទាហរណ៍ខាងក្រោម យើងប្រើជួរឈរជួរដេកដែលឆ្លើយតប និងថ្នាក់ gutter ឆ្លើយតប។
<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
. វាដក s អវិជ្ជមាន 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
ផែនទី 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,
);