Cruacha

Cúntóirí luathscríbhneoireachta a thógann ar bharr ár bhfóntais flexbox chun leagan amach comhpháirteanna a dhéanamh níos tapúla agus níos éasca ná riamh.

Ar an leathanach seo

Tairgeann Stacks aicearra chun roinnt maoine flexbox a chur i bhfeidhm chun leagan amach a chruthú go tapa agus go héasca i Bootstrap. Gabhann gach creidiúint as an gcoincheap agus as an gcur i bhfeidhm don tionscadal foinse oscailte Piolón .

Cinnirí suas! Cuireadh tacaíocht le haghaidh fóntais bearna le flexbox le Safari le déanaí, mar sin smaoinigh ar an tacaíocht brabhsálaí atá beartaithe agat a fhíorú. Níor cheart go mbeadh aon cheisteanna ag leagan amach greille. Léigh tuilleadh .

Ingearach

Bain úsáid as .vstackchun leagan amach ingearach a chruthú. Tá na míreanna cruachta lánleithead de réir réamhshocraithe. Úsáid .gap-*fóntais chun spás a chur idir míreanna.

An chéad mhír

An dara mír

An tríú mír

<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>

Cothrománach

Úsáid .hstackle haghaidh leagan amach cothrománach. Tá míreanna cruachta lárnaithe go ceartingearach de réir réamhshocraithe agus ní thógann siad ach an leithead riachtanach. Úsáid .gap-*fóntais chun spás a chur idir míreanna.

An chéad mhír

An dara mír

An tríú mír

<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>

Úsáid a bhaint as fóntais corrlaigh chothrománaigh .ms-automar spásairí:

An chéad mhír

An dara mír

An tríú mír

<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>

Agus le rialacha ingearacha :

An chéad mhír

An dara mír

An tríú mír

<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>

Samplaí

Úsáid .vstackchun cnaipí agus eilimintí eile a chruachadh:

<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>

Cruthaigh foirm inlíne le .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>

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