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.

Aplicando márgenes y rellenos – bootstrap 5

28 Jul, 2023 Programación

He comenzado a intentar usar bootstrap 5 y estoy completamente perdido. A continuación, se muestra una disposición que he creado (es decir, los elementos azules, la barra lateral se ha tomado de esta fuente) y estoy tratando de replicar la siguiente disposición.

enter image description here

Básicamente, estoy tratando de añadir un margen ordenado entre los elementos azules y hacer que L1, L2, L5 y L6 tengan la misma altura, y que L3 y L4 tengan la mitad de esa altura, y centrar los elementos azules en el espacio blanco.

Desde un jsfiddle que he hecho, el código css3 que he añadido para el estilo individual de los elementos azules es el siguiente:

.col{
    padding: 5rem;
    background-color: #33b5e5;
    border: 2px solid #fff456;
    border-radius: 10px;
    color: #fff;  
}

Para reducir el tamaño de los elementos, he intentado reducir el relleno, pero los elementos se posicionan más hacia la parte superior de la página. Añadir cualquier margen hace que los elementos sobrepasen a nuevas líneas.

Cualquier ayuda sería apreciada para acercarse al resultado deseado. Gracias.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución:

    Para replicar el diseño deseado, podemos utilizar el sistema de grillas de Bootstrap para crear las columnas y filas necesarias.

    Primero, creamos una fila con dos columnas. La primera columna será la barra lateral y la segunda contendrá los elementos azules.

    <div class="row">
  <div class="col-md-3">
    <!-- Contenido de la barra lateral aquí -->
  </div>
  <div class="col-md-9">
    <!-- Contenido de los elementos azules aquí -->
  </div>
</div>

    Luego, creamos otra fila con tres columnas para contener los elementos azules. Utilizaremos flexbox para alinear los elementos azules en el centro del espacio blanco.

    <div class="row">
  <div class="col-md-3">
    <!-- Contenido de la barra lateral aquí -->
  </div>
  <div class="col-md-9">
    <div class="row justify-content-center">
      <div class="col-md-3 col-sm-6">
        <!-- Contenido de L1 aquí -->
      </div>
      <div class="col-md-3 col-sm-6">
        <!-- Contenido de L2 aquí -->
      </div>
      <div class="col-md-6 col-sm-12 d-flex flex-column">
        <div class="row flex-fill">
          <div class="col-sm-12">
            <!-- Contenido de L3 aquí -->
          </div>
          <div class="col-sm-12">
            <!-- Contenido de L4 aquí -->
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6">
            <!-- Contenido de L5 aquí -->
          </div>
          <div class="col-sm-6">
            <!-- Contenido de L6 aquí -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

    Para hacer que L3 y L4 sean la mitad de la altura de L1, L2, L5 y L6, podemos utilizar flexbox para crear dos filas con alturas iguales y colocar L3 y L4 en columnas separadas.

    <div class="row">
  <div class="col-md-3">
    <!-- Contenido de la barra lateral aquí -->
  </div>
  <div class="col-md-9">
    <div class="row justify-content-center">
      <div class="col-md-3 col-sm-6">
        <!-- Contenido de L1 aquí -->
      </div>
      <div class="col-md-3 col-sm-6">
        <!-- Contenido de L2 aquí -->
      </div>
      <div class="col-md-6 col-sm-12 d-flex flex-column">
        <div class="row flex-fill">
          <div class="col-sm-12">
            <!-- Contenido de L3 aquí -->
          </div>
        </div>
        <div class="row flex-fill">
          <div class="col-sm-12">
            <!-- Contenido de L4 aquí -->
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6">
            <!-- Contenido de L5 aquí -->
          </div>
          <div class="col-sm-6">
            <!-- Contenido de L6 aquí -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

    Finalmente, para añadir un margen ordenado entre los elementos azules, podemos agregar margin-bottom a la clase .col.

    .col{
    padding: 3rem;
    background-color: #33b5e5;
    border: 2px solid #fff456;
    border-radius: 10px;
    color: #fff;
    margin-bottom: 2rem;  
}

    ¡Y eso es todo! Ahora tenemos un diseño que se asemeja al de la imagen deseada.

    Código completo:

    HTML:

    <div class="container">
  <div class="row">
    <div class="col-md-3">
      <!-- Contenido de la barra lateral aquí -->
    </div>
    <div class="col-md-9">
      <div class="row justify-content-center">
        <div class="col-md-3 col-sm-6">
          <div class="col">
            <!-- Contenido de L1 aquí -->
          </div>
        </div>
        <div class="col-md-3 col-sm-6">
          <div class="col">
            <!-- Contenido de L2 aquí -->
          </div>
        </div>
        <div class="col-md-6 col-sm-12 d-flex flex-column">
          <div class="row flex-fill">
            <div class="col-sm-12">
              <div class="col">
                <!-- Contenido de L3 aquí -->
              </div>
            </div>
          </div>
          <div class="row flex-fill">
            <div class="col-sm-12">
              <div class="col">
                <!-- Contenido de L4 aquí -->
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6">
              <div class="col">
                <!-- Contenido de L5 aquí -->
              </div>
            </div>
            <div class="col-sm-6">
              <div class="col">
                <!-- Contenido de L6 aquí -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

    CSS:

    .col{
    padding: 3rem;
    background-color: #33b5e5;
    border: 2px solid #fff456;
    border-radius: 10px;
    color: #fff;
    margin-bottom: 2rem;  
}

Comments are closed.