Улуци
Улуците са подложката между вашите колони, използвани за отзивчиво пространство и подравняване на съдържание в мрежовата система Bootstrap.
Как работят
-
Улуците са празнините между съдържанието на колоните, създадени от horizontal
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,
);