स्टॅक

शॉर्टहँड मदतनीस जे घटक लेआउट नेहमीपेक्षा जलद आणि सोपे करण्यासाठी आमच्या फ्लेक्सबॉक्स युटिलिटीजच्या वर तयार करतात.

या पृष्ठावर

बूटस्ट्रॅपमध्ये लेआउट जलद आणि सहजतेने तयार करण्यासाठी स्टॅक अनेक फ्लेक्सबॉक्स गुणधर्म लागू करण्यासाठी शॉर्टकट देतात. संकल्पना आणि अंमलबजावणीचे सर्व श्रेय ओपन सोर्स पायलॉन प्रकल्पाला जाते .

सावधान! फ्लेक्सबॉक्ससह गॅप युटिलिटिजसाठी समर्थन नुकतेच सफारीमध्ये जोडले गेले आहे, त्यामुळे तुमचा इच्छित ब्राउझर समर्थन सत्यापित करण्याचा विचार करा. ग्रिड लेआउटमध्ये कोणतीही समस्या नसावी. अधिक वाचा .

उभ्या

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