Стек

Бүрэлдэхүүн хэсгүүдийн байршлыг урьд өмнөхөөсөө илүү хурдан бөгөөд хялбар болгохын тулд манай flexbox хэрэгслүүд дээр бүтээгдсэн богино гарын авлагууд.

Энэ хуудсан дээр

Stacks нь Bootstrap-д байршлыг хурдан бөгөөд хялбар үүсгэхийн тулд хэд хэдэн flexbox шинж чанарыг ашиглах товчлолыг санал болгодог. Үзэл баримтлал ба хэрэгжилтийн бүх зээл нь нээлттэй эхийн Pylon төсөлд очдог .

Анхаараарай! Саяхан Safari-д flexbox-той цоорхой хэрэглүүрүүдийн дэмжлэг нэмэгдсэн тул хөтчийнхөө дэмжлэгийг шалгана уу. Сүлжээний зохион байгуулалт нь ямар ч асуудалгүй байх ёстой. Дэлгэрэнгүй уншина уу .

Босоо

.vstackБосоо байрлал үүсгэхийн тулд ашиглана уу. Овоолсон зүйлүүд нь анхдагчаар бүтэн өргөнтэй байдаг. .gap-*Зүйлүүдийн хооронд зай нэмэхийн тулд хэрэгслүүдийг ашиглана уу.

Эхний зүйл

Хоёр дахь зүйл

Гурав дахь зүйл

<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-*Зүйлүүдийн хооронд зай нэмэхийн тулд хэрэгслүүдийг ашиглана уу.

Эхний зүйл

Хоёр дахь зүйл

Гурав дахь зүйл

<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болгон ашиглах:

Эхний зүйл

Хоёр дахь зүйл

Гурав дахь зүйл

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

Мөн босоо дүрмээр :

Эхний зүйл

Хоёр дахь зүйл

Гурав дахь зүйл

<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Товчнууд болон бусад элементүүдийг овоолоход ашиглана уу:

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

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