in English

pilas

Asistentes de taquigrafía que se basan en nuestras utilidades flexbox para hacer que el diseño de componentes sea más rápido y fácil que nunca.

En esta página

Las pilas ofrecen un atajo para aplicar una serie de propiedades de flexbox para crear diseños rápida y fácilmente en Bootstrap. Todo el crédito por el concepto y la implementación va al proyecto de fuente abierta Pylon .

¡Aviso! La compatibilidad con las utilidades gap con flexbox se agregó recientemente a Safari, así que considere verificar la compatibilidad de su navegador previsto. El diseño de la cuadrícula no debería tener problemas. Leer más

Vertical

Úselo .vstackpara crear diseños verticales. Los elementos apilados ocupan el ancho completo de forma predeterminada. Use .gap-*utilidades para agregar espacio entre los elementos.

Primer elemento

segundo artículo

tercer artículo

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

Horizontal

Úselo .hstackpara diseños horizontales. Los elementos apilados están centrados verticalmente de forma predeterminada y solo ocupan el ancho necesario. Use .gap-*utilidades para agregar espacio entre los elementos.

Primer elemento

segundo artículo

tercer artículo

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

Usando utilidades de margen horizontal .ms-autocomo espaciadores:

Primer elemento

segundo artículo

tercer artículo

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

Y con reglas verticales :

Primer elemento

segundo artículo

tercer artículo

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

Ejemplos

Úselo .vstackpara apilar botones y otros elementos:

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

Cree un formulario en línea con .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>

Hablar con descaro a

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