Asosiy tarkibga o'tish Hujjatlar navigatsiyasiga oʻtish
in English

Staklar

Komponentlar tartibini har qachongidan ham tezroq va oson qilish uchun bizning flexbox yordamchi dasturlarimiz ustiga qurilgan stenografiya yordamchilari.

Ushbu sahifada

Stacks Bootstrap-da tartiblarni tez va oson yaratish uchun bir qator flexbox xususiyatlarini qo'llash uchun yorliqni taklif qiladi. Kontseptsiya va amalga oshirish uchun barcha kredit ochiq manba Pylon loyihasiga tushadi .

Oldindan qisqa ma'lumot berish! Yaqinda Safari-ga flexbox-ga ega bo'sh yordamchi dasturlarni qo'llab-quvvatlash qo'shildi, shuning uchun mo'ljallangan brauzerni qo'llab-quvvatlashni tekshiring. Grid tartibida hech qanday muammo bo'lmasligi kerak. Batafsil o'qing .

Vertikal

.vstackVertikal tartiblarni yaratish uchun foydalaning . Yig'ilgan elementlar sukut bo'yicha to'liq kenglikda. .gap-*Elementlar orasiga bo'sh joy qo'shish uchun yordamchi dasturlardan foydalaning .

Birinchi element
Ikkinchi element
Uchinchi element
<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>

Gorizontal

.hstackGorizontal sxemalar uchun foydalaning . Yig'ilgan elementlar sukut bo'yicha vertikal markazlashtirilgan va faqat kerakli kenglikni egallaydi. .gap-*Elementlar orasiga bo'sh joy qo'shish uchun yordamchi dasturlardan foydalaning .

Birinchi element
Ikkinchi element
Uchinchi element
<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>

Gorizontal marja yordam vositalaridan, masalan .ms-auto, ajratgichlar sifatida foydalanish:

Birinchi element
Ikkinchi element
Uchinchi element
<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>

Va vertikal qoidalar bilan :

Birinchi element
Ikkinchi element
Uchinchi element
<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>

Misollar

.vstackTugmalar va boshqa elementlarni yig'ish uchun foydalaning :

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

Quyidagi bilan ichki shakl yarating .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;
}