Олуци
Олуците се поставата помеѓу вашите колони, кои се користат за одговорно простор и усогласување на содржината во мрежниот систем 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,
);