मुख्य सामग्रीमा जानुहोस् कागजात नेभिगेसनमा जानुहोस्
Check
in English

स्ट्याकहरू

कम्पोनेन्ट लेआउटलाई पहिले भन्दा छिटो र सजिलो बनाउन हाम्रो फ्लेक्सबक्स उपयोगिताहरूको शीर्षमा निर्माण गर्ने शर्टह्यान्ड सहयोगीहरू।

यस पृष्ठमा

स्ट्याकहरूले बुटस्ट्र्यापमा छिटो र सजिलै लेआउटहरू सिर्जना गर्न फ्लेक्सबक्स गुणहरूको संख्या लागू गर्न सर्टकट प्रस्ताव गर्दछ। अवधारणा र कार्यान्वयनको लागि सबै श्रेय खुला स्रोत Pylon परियोजनामा ​​जान्छ ।

हेड अप! फ्लेक्सबक्सको साथ खाली उपयोगिताहरूको लागि समर्थन भर्खरै सफारीमा थपिएको थियो, त्यसैले तपाईंको इच्छित ब्राउजर समर्थन प्रमाणित गर्ने विचार गर्नुहोस्। ग्रिड लेआउटमा कुनै समस्या हुनु हुँदैन। थप पढ्नुहोस्

ठाडो

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