in English

Арыктар

Аңгычтар - Bootstrap тор тутумундагы мазмунду туура мейкиндикке салуу жана тегиздөө үчүн колдонулган мамычаларыңыздын ортосундагы толтургуч.

Бул бетте

Алар кантип иштешет

Арыктар горизонталдуу тарабынан түзүлгөн мамычанын мазмунунун ортосундагы боштуктар padding. Биз ар бир мамычага padding-rightжана коюп , мазмунду тегиздөө үчүн ар бир саптын башында жана аягында анын ордун алмаштыруу padding-leftүчүн негативди колдонобуз .margin
Арыктар 1.5rem( 24px) туурасынан башталат. Бул биздин торубузду толтургуч жана маржа бөлгүчтөрдүн масштабына дал келтирүүгө мүмкүндүк берет .
Арыктарды жооп иретинде жөнгө салууга болот. Горизонталдуу арыктарды, вертикалдуу арыктарды жана бардык арыктарды өзгөртүү үчүн үзгүлтүккө жараша атайын канал класстарын колдонуңуз.

Горизонталдык арыктар

.gx-*класстар горизонталдуу арык туурасын көзөмөлдөө үчүн колдонулушу мүмкүн. Каалабаган толуп кетпеш үчүн чоңураак арыктар да колдонулса, .containerже ата - эне тууралоо керек болушу мүмкүн. .container-fluidМисалы, төмөнкү мисалда биз толтурууну көбөйттүк .px-4:

Ыңгайлаштырылган тилке толтуруу

html

<div class="container px-4 text-center">
  <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

Ыңгайлаштырылган тилке толтуруу

html

<div class="container overflow-hidden text-center">
  <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класстын айланасына ороп коесуз :

Ыңгайлаштырылган тилке толтуруу

html

<div class="container overflow-hidden text-center">
  <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орогуч классын кошуунун кереги жок болот.

Ыңгайлаштырылган тилке толтуруу

html

<div class="container text-center">
  <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>

Катар мамычалардын арыктары

Катар тилкелерине канал класстарын да кошууга болот . Төмөнкү мисалда биз жооп берүүчү сап мамычаларды жана жооп берүүчү канал класстарын колдонобуз.

Катар тилке

html

<div class="container text-center">
  <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. Бул бардык дароо балдар тилкелериндеги терс margins .rowжана горизонталдууларды жок кылат.padding

Чектен четине дизайн керекпи? Ата-энени таштаңыз .containerже толуп кетпеш үчүн ага .container-fluidкошуп коюңуз..mx-0.row

Иш жүзүндө, бул кандай көрүнөт. Муну башка бардык алдын ала аныкталган тор класстары (анын ичинде мамычалардын тууралары, жооп берүүчү деңгээлдер, иреттөөлөр жана башкалар) менен колдоно берсеңиз болот.

.col-sm-6 .col-md-8

.col-6 .col-md-4

html

<div class="row g-0 text-center">
  <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>

Арыктарды алмаштырыңыз

Класстар $guttersSass картасынан мураска алынган 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,
);