Tumpukan

Pembantu singkatan yang dibangun di atas utilitas flexbox kami untuk membuat tata letak komponen lebih cepat dan lebih mudah dari sebelumnya.

Di halaman ini

Tumpukan menawarkan pintasan untuk menerapkan sejumlah properti flexbox untuk membuat tata letak dengan cepat dan mudah di Bootstrap. Semua kredit untuk konsep dan implementasi diberikan kepada proyek Pylon open source .

Perhatian! Dukungan untuk utilitas celah dengan flexbox baru-baru ini ditambahkan ke Safari, jadi pertimbangkan untuk memverifikasi dukungan browser yang Anda inginkan. Tata letak kotak seharusnya tidak memiliki masalah. Baca lebih lanjut .

Vertikal

Gunakan .vstackuntuk membuat tata letak vertikal. Item yang ditumpuk memiliki lebar penuh secara default. Gunakan .gap-*utilitas untuk menambahkan ruang di antara item.

Barang pertama

Barang kedua

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

Horisontal

Gunakan .hstackuntuk tata letak horizontal. Item yang ditumpuk dipusatkan secara vertikal secara default dan hanya mengambil lebar yang diperlukan. Gunakan .gap-*utilitas untuk menambahkan ruang di antara item.

Barang pertama

Barang kedua

Barang 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 utilitas margin horizontal seperti .ms-autosebagai spacer:

Barang pertama

Barang kedua

Barang 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 aturan vertikal :

Barang pertama

Barang kedua

Barang 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 menumpuk tombol dan elemen lainnya:

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

Kelancangan

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