مکيه مواد ڏانهن وڃو Docs نيويگيشن ڏانھن وڃو
in English

اسٽيڪ

شارٽ هينڊ مددگار جيڪي اسان جي فليڪس باڪس يوٽيلٽيز جي مٿان ٺاهيندا آهن جزو جي ترتيب کي اڳي کان وڌيڪ تيز ۽ آسان بڻائڻ لاءِ.

هن صفحي تي

بوٽ اسٽراپ ۾ تڪڙو ۽ آساني سان ترتيب ٺاهڻ لاءِ اسٽيڪ ڪيترن ئي فلڪس باڪس ملڪيتن کي لاڳو ڪرڻ لاءِ شارٽ ڪٽ پيش ڪري ٿو. تصور ۽ عمل درآمد جو سمورو ڪريڊٽ اوپن سورس پائلون پروجيڪٽ کي وڃي ٿو .

اٿو! فليڪس باڪس سان گپ يوٽيلٽيز لاءِ سپورٽ تازو سفاري ۾ شامل ڪئي وئي، تنھنڪري پنھنجي مطلوب برائوزر سپورٽ جي تصديق ڪرڻ تي غور ڪريو. گرڊ جي ترتيب ۾ ڪوبه مسئلو نه هجڻ گهرجي. وڌيڪ پڙهو .

عمودي

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