1

Hola tengo este código que me coloca 9 divs de distintos tamaños:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 4. Columnas</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  </head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-3">1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
      <div class="col-3">2  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
      <div class="col-3">3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</div>
      <div class="col-3">4   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. .</div>
      <div class="col-3">5  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
      <div class="col-3">6 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
       <div class="col-3">7 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
      <div class="col-3">8  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. .</div>
      <div class="col-3">9 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    </div>   

  </div>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

Quedan los 9 div alineados perfectamente pero todos de la misma altura y los que tienen pocos caracteres quedan con mucho espacio en blanco. Además de quererlos más pequeños acorde a su contenido, quisiera que el de abajo suba y queden mas juntos tipo tetrix. No sé si se comprende. Algo así

obviamente con texto solamente que se carga en forma dinámica vía <code>php</code>:

Gracias

2 respuestas 2

4

Lo que estás buscando probablemente sea el estilo de diseño Masonry. Podés lograr ese comportamiento usando la clase card-columns y envolviendo cada contenido de los div con la clase card en un div con la clase card-body.

Usando tu ejemplo, luciría algo así:

<html lang="es">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 4. Columnas</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  </head>

  <body>
    <div class="card-columns">
        <div class="card p-3"> <!-- La p en "p-3" indica el padding -->
          <div class="card-body">1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  </div>
        </div>
        <div class="card p-3">
          <div class="card-body">2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
        </div>
        <div class="card p-3">
          <div class="card-body">3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</div>
        </div>
        <div class="card p-3">
          <div class="card-body">4 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. .</div>
        </div>
        <div class="card p-3">
          <div class="card-body">5 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
        </div>
        <div class="card p-3">
          <div class="card-body">6 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
        </div>
        <div class="card p-3">
          <div class="card-body">7 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
        </div>
        <div class="card p-3">
          <div class="card-body">8 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. .</div>
        </div>
        <div class="card p-3">
          <div class="card-body">9 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
        </div>
      </div>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  </body>

</html>

1

Tal vez debas echarle un vistazo a las especificaciones de bootstrap. Por mientras considera la siguiente: El ancho dentro de un contenedor html con bootstrap se puede manejar con celdas cuyo ancho se maneja con divisores del 12.

Ejemplo:

<div class='row'>
   <div class='col-6'><label>Este ocupa la mitad del div padre</label></div>
   <div class='col-3'><label>Este ocupa la cuarta parte del div padre</label></div>
   <div class='col-3'><label>Este ocupa la otra cuarta parte del div padre</label></div>
</div>

Si los elementos dentro usan la class col-X y suman más de 12 puede provocar desborde. Espero haberte entendido y ayudado.

EDICIÓN 28-05-2020: Si necesitas que cada div se acomode verticalmente debes hacer que cada uno use una fila completa (class='row')

   <div class='row'><label>Este ocupa todo en ancho del contenedor</label></div>
   <div class='row'><label>Este también</label></div>
   <div class='row'><label>Adivina...</label>
5
  • Entiendo @Mauricio Murillo pero yo quiero que se acomoden en altura y no en el ancho. Ademas el contenido lo desconozco, se carga dinamicamente. Muchas gracias igual el 25 may. 2020 a las 22:58
  • @ClaudioGonzalez, entonces no utilices la class 'col-3' esa te la acomoda en columnas, mejor usa la class 'row' que esa va a forzar a los div a separarse por filas. el 26 may. 2020 a las 0:14
  • @ClaudioGonzalez y saca los div de dentro del div con la class 'row'. el 26 may. 2020 a las 0:14
  • No comprendo la respuesta, como seria el codigo? el 26 may. 2020 a las 2:10
  • Edité mi respuesta, espero ahora te quede más claro. el 28 may. 2020 a las 12:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.