Арықтар

Шұңқырлар - Bootstrap тор жүйесіндегі мазмұнды жылдам орналастыру және туралау үшін пайдаланылатын бағандар арасындағы толтырғыш.

Бұл бетте

Олар қалай жұмыс істейді

Арықтар - көлденең арқылы жасалған баған мазмұны арасындағы бос орындар padding. Біз әрбір бағанға және орнатамыз padding-rightжәне мазмұнды туралау үшін әрбір жолдың басы мен аяғындағы оның орнын толтыру үшін теріс мәнді пайдаланамыз.padding-leftmargin
Арықтар 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 картасынан мұраланған $spacersSass картасынан құрастырылған.

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);