ערימות

עוזרי קיצור המבוססים על כלי השירות שלנו ל-flexbox כדי להפוך את פריסת הרכיבים למהירה וקלה יותר מאי פעם.

בעמוד זה

ערימות מציעות קיצור דרך להחלת מספר מאפייני flexbox ליצירת פריסות במהירות ובקלות ב-Bootstrap. כל הקרדיט על הרעיון והיישום מגיע לפרויקט Pylon בקוד פתוח .

שימו לב! לאחרונה נוספה ל-Safari תמיכה בכלי עזר ל-gap עם flexbox, אז שקול לאמת את תמיכת הדפדפן המיועדת שלך. לא אמורות להיות בעיות בפריסת הרשת. קרא עוד .

אֲנָכִי

השתמש .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;
}