ڈھیر

شارٹ ہینڈ مددگار جو اجزاء کی ترتیب کو پہلے سے کہیں زیادہ تیز اور آسان بنانے کے لیے ہماری فلیکس باکس یوٹیلیٹیز کے اوپر تیار کرتے ہیں۔

اس صفحہ پر

اسٹیکس بوٹسٹریپ میں تیزی اور آسانی سے لے آؤٹ بنانے کے لیے متعدد فلیکس باکس پراپرٹیز کو لاگو کرنے کے لیے ایک شارٹ کٹ پیش کرتے ہیں۔ تصور اور نفاذ کا تمام کریڈٹ اوپن سورس پائلون پروجیکٹ کو جاتا ہے ۔

سنو! فلیکس باکس کے ساتھ گیپ یوٹیلیٹیز کے لیے سپورٹ کو حال ہی میں سفاری میں شامل کیا گیا ہے، لہذا اپنے مطلوبہ براؤزر سپورٹ کی تصدیق کرنے پر غور کریں۔ گرڈ لے آؤٹ میں کوئی مسئلہ نہیں ہونا چاہیے۔ مزید پڑھیں

عمودی

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