Yığınlar

Bileşen düzenini her zamankinden daha hızlı ve kolay hale getirmek için flexbox yardımcı programlarımızın üzerine inşa edilen steno yardımcıları.

Bu sayfada

Yığınlar, Bootstrap'ta mizanpajları hızlı ve kolay bir şekilde oluşturmak için bir dizi esnek kutu özelliği uygulamak için bir kısayol sunar. Konsept ve uygulama için tüm kredi açık kaynak Pylon projesine gidiyor .

Önüne bak! Flexbox ile boşluk yardımcı programları için destek yakın zamanda Safari'ye eklendi, bu nedenle amaçlanan tarayıcı desteğinizi doğrulamayı düşünün. Izgara düzeninde herhangi bir sorun olmamalıdır. Devamını oku .

Dikey

.vstackDikey düzenler oluşturmak için kullanın . Yığılmış öğeler varsayılan olarak tam genişliktedir. .gap-*Öğeler arasına boşluk eklemek için yardımcı programları kullanın .

İlk eşya

İkinci öğe

Üçüncü öğe

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>

Yatay

.hstackYatay düzenler için kullanın . Yığılmış öğeler varsayılan olarak dikey olarak ortalanır ve yalnızca gerekli genişlikleri kaplar. .gap-*Öğeler arasına boşluk eklemek için yardımcı programları kullanın .

İlk eşya

İkinci öğe

Üçüncü öğe

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-autoAralayıcılar gibi yatay kenar boşluğu yardımcı programlarını kullanma :

İlk eşya

İkinci öğe

Üçüncü öğe

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>

Ve dikey kurallarla :

İlk eşya

İkinci öğe

Üçüncü öğe

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>

Örnekler

.vstackDüğmeleri ve diğer öğeleri yığınlamak için kullanın :

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>

Şunlarla bir satır içi form oluşturun .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>

küstah

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