Стектер

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

Бул бетте

Stacks Bootstrap'те макеттерди тез жана оңой түзүү үчүн бир катар flexbox касиеттерин колдонуу үчүн жарлыкты сунуштайт. Концепция жана ишке ашыруу үчүн бардык кредиттер ачык булак Pylon долбооруна берилет.

Көңүл бургула! Flexbox менен боштук утилиталарын колдоо жакында Safari'ге кошулду, андыктан браузериңизди колдоону текшерип көрүңүз. Тордун жайгашуусунда эч кандай көйгөйлөр болбошу керек. Көбүрөөк окуу .

Вертикалдуу

.vstackВертикалдуу макеттерди түзүү үчүн колдонуңуз . Үйүлгөн элементтер демейки боюнча толук кең. .gap-*Элементтердин арасына боштук кошуу үчүн утилиталарды колдонуңуз .

Биринчи пункт

Экинчи пункт

Үчүнчү пункт

<div class="vstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

Горизонталдуу

.hstackГоризонталдуу макеттер үчүн колдонуңуз . Үйүлгөн элементтер демейки боюнча вертикалдуу борборлоштурулган жана алардын керектүү туурасын гана алат. .gap-*Элементтердин арасына боштук кошуу үчүн утилиталарды колдонуңуз .

Биринчи пункт

Экинчи пункт

Үчүнчү пункт

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

Бөлмө катары горизонталдык маржа утилиталарын колдонуу .ms-auto:

Биринчи пункт

Экинчи пункт

Үчүнчү пункт

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

Жана вертикалдуу эрежелер менен :

Биринчи пункт

Экинчи пункт

Үчүнчү пункт

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="bg-light border">Third item</div>
</div>

Мисалдар

.vstackБаскычтарды жана башка элементтерди стектөө үчүн колдонуңуз :

<div class="vstack gap-2 col-md-5 mx-auto">
  <button type="button" class="btn btn-secondary">Save changes</button>
  <button type="button" class="btn btn-outline-secondary">Cancel</button>
</div>

Төмөнкү менен саптык форманы түзүңүз .hstack:

<div class="hstack gap-3">
  <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
  <button type="button" class="btn btn-secondary">Submit</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Reset</button>
</div>

Sass

.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}