Tumpukan

Pembantu ringkas yang membina di atas utiliti flexbox kami untuk menjadikan reka letak komponen lebih pantas dan lebih mudah berbanding sebelum ini.

Pada halaman ini

Tindanan menawarkan pintasan untuk menggunakan beberapa sifat flexbox untuk membuat reka letak dengan cepat dan mudah dalam Bootstrap. Semua kredit untuk konsep dan pelaksanaan diberikan kepada projek Pylon sumber terbuka .

Angkat kepala! Sokongan untuk utiliti gap dengan flexbox telah ditambahkan pada Safari baru-baru ini, jadi pertimbangkan untuk mengesahkan sokongan penyemak imbas yang anda inginkan. Susun atur grid sepatutnya tidak mempunyai masalah. Baca lebih lanjut .

Menegak

Gunakan .vstackuntuk membuat susun atur menegak. Item bertindan adalah lebar penuh secara lalai. Gunakan .gap-*utiliti untuk menambah ruang antara item.

Item pertama

Item kedua

Item ketiga

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>

Mendatar

Gunakan .hstackuntuk susun atur mendatar. Item bertindan dipusatkan secara menegak secara lalai dan hanya mengambil lebar yang diperlukan. Gunakan .gap-*utiliti untuk menambah ruang antara item.

Item pertama

Item kedua

Item ketiga

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>

Menggunakan utiliti margin mendatar seperti .ms-autosebagai spacer:

Item pertama

Item kedua

Item ketiga

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>

Dan dengan peraturan menegak :

Item pertama

Item kedua

Item ketiga

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>

Contoh

Gunakan .vstackuntuk menyusun butang dan elemen lain:

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>

Buat borang sebaris dengan .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>

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