in English

Стектер

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

Бұл бетте

Стектер Bootstrap бағдарламасында макеттерді жылдам және оңай жасау үшін бірқатар flexbox сипаттарын қолдануға арналған төте жолды ұсынады. Тұжырымдама мен іске асыру үшін барлық несие ашық бастапқы Pylon жобасына беріледі .

Ескерту! Жақында Safari-ге flexbox-пен бос орындық қызметтік бағдарламаларды қолдау қосылды, сондықтан браузерге арналған қолдауды тексеріңіз. Тор орналасуында ешқандай мәселелер болмауы керек. Толығырақ оқыңыз .

Вертикалды

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