Купишта

Стенографски помошници кои се надоврзуваат на нашите алатки за flexbox за да го направат распоредот на компонентите побрз и полесен од кога било.

На оваа страница

Купиштата нудат кратенка за примена на голем број својства на flexbox за брзо и лесно креирање распореди во Bootstrap. Секоја заслуга за концептот и имплементацијата оди на проектот Pylon со отворен код .

Главите горе! Поддршката за gap utilities со flexbox неодамна беше додадена на Safari, затоа размислете да ја потврдите наменетата поддршка на прелистувачот. Распоредот на мрежата не треба да има проблеми. Прочитајте повеќе .

Вертикално

Користете .vstackза да креирате вертикални распореди. Стандардно, наредените ставки се со целосна ширина. Користете .gap-*помошни програми за да додадете простор помеѓу ставките.

Прва ставка

Втора ставка

Трета ставка

html

<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-*помошни програми за да додадете простор помеѓу ставките.

Прва ставка

Втора ставка

Трета ставка

html

<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што се разделувачи:

Прва ставка

Втора ставка

Трета ставка

html

<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>

И со вертикални правила :

Прва ставка

Втора ставка

Трета ставка

html

<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за натрупување копчиња и други елементи:

html

<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:

html

<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>

Сас

.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;
}