پشته ها

کمک‌کننده‌های کوتاه‌نویسی که بر روی ابزارهای flexbox ما ساخته می‌شوند تا طرح‌بندی اجزا را سریع‌تر و آسان‌تر از همیشه کنند.

در این صفحه

پشته ها میانبری برای اعمال تعدادی از ویژگی های flexbox برای ایجاد سریع و آسان طرح بندی در Bootstrap ارائه می دهند. تمام اعتبار مفهوم و پیاده سازی به پروژه منبع باز Pylon اختصاص دارد.

سر بالا! پشتیبانی از ابزارهای شکاف با flexbox اخیراً به Safari اضافه شده است، بنابراین پشتیبانی مرورگر مورد نظر خود را تأیید کنید. چیدمان شبکه نباید مشکلی داشته باشد. ادامه مطلب را بخوانید .

عمودی

.vstackبرای ایجاد طرح بندی عمودی استفاده کنید. موارد انباشته به طور پیش فرض تمام عرض هستند. از .gap-*ابزارهای کمکی برای اضافه کردن فاصله بین موارد استفاده کنید.

مورد اول

مورد دوم

مورد سوم

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>

افقی

.hstackبرای طرح بندی افقی استفاده کنید . موارد روی هم به طور پیش فرض به صورت عمودی در مرکز قرار دارند و فقط عرض لازم خود را اشغال می کنند. از .gap-*ابزارهای کمکی برای اضافه کردن فاصله بین موارد استفاده کنید.

مورد اول

مورد دوم

مورد سوم

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-autoجداکننده ها:

مورد اول

مورد دوم

مورد سوم

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>

و با قوانین عمودی :

مورد اول

مورد دوم

مورد سوم

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>

مثال ها

برای .vstackچیدن دکمه ها و سایر عناصر استفاده کنید:

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>

ایجاد یک فرم درون خطی با .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>

ساس

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