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.

División de espacio dentro de un contenedor fluido en Bootstrap 5.

05 Jun, 2023 Programación

Tengo este contenedor fluido y está dividido de la siguiente manera:

barra lateral
control deslizante superior
botón grande

La siguiente sección que deseo tener es tener 4 divs que ocupen el área justo debajo de col-7 + col-2.

Básicamente, quiero algo como esto:

image

He intentado crear otra fila debajo de la fila existente y tener una col-3 vacía, pero las cuatro columnas que quiero no encajan en su lugar. ¿Cómo puedo tener las cuatro columnas como se muestra en la imagen?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr el diseño deseado, puede agregar otra fila row después de la fila existente y dividirla en cuatro columnas usando col-md-3. Su código se vería así:

    <div class="container-fluid">

    <div class="row">
        <div class="col-3">
        barra lateral
        </div>
        <div class="col-7">
        deslizador superior
        </div>
        <div class="col-2">
        botón grande
        </div>
    </div>

    <div class="row">
        <div class="col-md-3">
        caja 1
        </div>
        <div class="col-md-3">
        caja 2
        </div>
        <div class="col-md-3">
        caja 3
        </div>
        <div class="col-md-3">
        caja 4
        </div>
    </div>

</div>

    Tenga en cuenta que estamos usando col-md-3 en lugar de col-3 para la segunda fila. Esto es para garantizar que las columnas se apilen correctamente en pantallas más pequeñas. Si desea que las columnas siempre tengan el mismo tamaño, puede usar col-3 en su lugar.

    Además, asegúrese de que el número total de columnas en cada fila sume 12 o menos, de lo contrario no cabrán dentro del contenedor fluido.

Comments are closed.