Арыктар
Аңгычтар - 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 картасынан мураска алынган Sass картасынан курулган $spacers
.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);