es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

‘Fluida’ alineación de columnas Bootstrap 5.

11 Jun, 2023 Programación

Estoy tratando de obtener un resultado similar a lo que se describe en la imagen adjunta. Los anchos de las columnas deben ser iguales si eso hace alguna diferencia, pero me gustaría utilizar columnas no basadas en filas que llenen el espacio verticalmente.

No pude encontrar ningún ejemplo de código o ninguna mención en la documentación de Bootstrap para este tipo de alineación.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr este diseño utilizando Bootstrap, puedes utilizar las utilidades de Flexbox CSS proporcionadas por Bootstrap 5. Puedes envolver las tres columnas en un contenedor y usar las clases d-flex y flex-wrap en el contenedor para crear un contenedor flexible que permite que las columnas se envuelvan a la siguiente línea cuando no hay suficiente espacio. También puedes usar la clase flex-fill en las columnas para hacer que crezcan y llenen el espacio disponible verticalmente. Aquí está el código que puedes usar:

    <div class="d-flex flex-wrap">
  <div class="flex-fill">
    <!-- Contenido de la columna 1 -->
  </div>
  <div class="flex-fill">
    <!-- Contenido de la columna 2 -->
  </div>
  <div class="flex-fill">
    <!-- Contenido de la columna 3 -->
  </div>
</div>

    Esto te dará un diseño en el que las columnas tienen el mismo ancho y llenan el espacio disponible verticalmente, similar a la imagen que proporcionaste.

Comments are closed.