Rafte

Ndihmës të shkurtër që ndërtohen në krye të shërbimeve tona flexbox për ta bërë paraqitjen e komponentëve më të shpejtë dhe më të lehtë se kurrë.

Në këtë faqe

Stacks ofrojnë një shkurtore për aplikimin e një numri karakteristikash flexbox për të krijuar shpejt dhe me lehtësi paraqitjet në Bootstrap. E gjithë merita për konceptin dhe zbatimin i takon projektit Pylon me kod të hapur .

Kokat lart! Mbështetja për shërbimet Gap me flexbox u shtua kohët e fundit në Safari, prandaj konsideroni të verifikoni mbështetjen e synuar të shfletuesit tuaj. Paraqitja e rrjetit nuk duhet të ketë probleme. Lexo më shumë .

Vertikale

Përdorni .vstackpër të krijuar paraqitje vertikale. Artikujt e grumbulluar janë si parazgjedhje me gjerësi të plotë. Përdorni .gap-*programet ndihmëse për të shtuar hapësirë midis artikujve.

Artikulli i parë

Artikulli i dytë

Pika e tretë

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>

Horizontale

Përdorni .hstackpër paraqitje horizontale. Artikujt e grumbulluar janë të përqendruar vertikalisht si parazgjedhje dhe marrin vetëm gjerësinë e tyre të nevojshme. Përdorni .gap-*programet ndihmëse për të shtuar hapësirë midis artikujve.

Artikulli i parë

Artikulli i dytë

Pika e tretë

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>

Përdorimi i shërbimeve të marzhit horizontal si .ms-autosi ndarës:

Artikulli i parë

Artikulli i dytë

Pika e tretë

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>

Dhe me rregulla vertikale :

Artikulli i parë

Artikulli i dytë

Pika e tretë

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>

Shembuj

Përdorni .vstackpër të grumbulluar butona dhe elementë të tjerë:

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>

Krijoni një formë inline me .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>

Sass

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