Арықтар
Шұңқырлар - 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
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,
);