Estaba utilizando una versión 3 de Bootstrap. Ahora que actualicé a la versión 4 tengo el siguiente problema:
Me funcionaba con Bootstrap 3 (ver en página completa):
.titulo {
height: 200px;
background: #666;
border: 1px solid #333;
}
.dato {
height: 100px;
background: #666;
border: 1px solid #333;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="titulo col-lg-3 col-md-4 col-sm-4">Titulo</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">1</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">2</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">3</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">4</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">5</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">6</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">7</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">8</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">9</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">10</div>
</div>
Y el mismo código me dejó de funcionar con Bootstrap 4:
.titulo {
height: 200px;
background: #666;
border: 1px solid #333;
}
.dato {
height: 100px;
background: #666;
border: 1px solid #333;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="titulo col-lg-3 col-md-4 col-sm-4">Titulo</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">1</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">2</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">3</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">4</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">5</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">6</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">7</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">8</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">9</div>
<div class="dato col-lg-3 col-md-4 col-sm-4">10</div>
</div>
Pregunta:
¿Cómo puedo hacer para que el div .titulo
ocupe 2 filas, y los divs .dato
se acomoden de forma responsiva, utilizando el espacio restante, de acuerdo a si es un dispositivo sm
o lg
? Los divs tienen un alto fijo (el título es 2 veces el alto del resto).
Vale aclarar que armo las cajas pequeñas dinámicamente con un ngFor
de angular, por lo tanto dividirlas dentro de contenedores de forma fija no es una opción. El código que tengo para generarlas es:
<div class="dato col-lg-3 col-md-4 col-sm-6"
*ngFor="let dato of datos">
{{dato.nombre}}
</div>