الأكوام

مساعدي الاختزال الذين يعتمدون على أدوات Flexbox المساعدة الخاصة بنا لجعل تخطيط المكونات أسرع وأسهل من أي وقت مضى.

على هذه الصفحة

توفر Stacks اختصارًا لتطبيق عدد من خصائص flexbox لإنشاء تخطيطات في Bootstrap بسرعة وسهولة. يذهب كل الفضل في المفهوم والتنفيذ إلى مشروع Pylon مفتوح المصدر .

انتباه! تمت إضافة دعم أدوات الفجوة مع flexbox مؤخرًا إلى Safari ، لذا فكر في التحقق من دعم المستعرض المقصود. يجب ألا يكون لتخطيط الشبكة مشاكل. اقرأ المزيد .

عمودي

استخدم .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;
}