21

Estaba utilizando una versión 3 de Bootstrap. Ahora que actualicé a la versión 4 tengo el siguiente problema:

introducir la descripción de la imagen aquí

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>
6
  • ¿Has probado con esta herramienta? prepbootstrap.com/converter
    – Kiko_L
    Commented el 28 mar. 2018 a las 19:47
  • El tamaño de esas cajas sera fijo o relativo? Por que si es fijo, seria que agregaras la caja grande en un contenedor, luego las otras 2 filas de cajas pequeñas en otro contenedor y todo esto dentro de un contenedor mucho mas grande. Commented el 28 mar. 2018 a las 19:51
  • El ancho de esas cajas lo maneja bootstrap, lo que si es fijo es el alto. Antes funcionaba bien, con una version antigua de boostrap, pero ahora que utilizo la ultima versión, las cajas pequeñas ya no fluyen al rededor de la caja mas grande Commented el 28 mar. 2018 a las 19:55
  • 1
    Hola Carlos, talves podríamos darte una mejor respuesta si nos muestras el html "compilado", te sugiero que termines el recorrido de bienvenida del sitio y revises como crear un ejemplo mínimo verificable
    – user22721
    Commented el 28 mar. 2018 a las 21:47
  • 1
    Hola KacosPro, acabo de editar mi pregunta y subí un fragmento de código en donde trato de explicar el problema, espero se vea y se comprenda esta vez. De ante mano gracias Aunque no se si en este fragmento de código ustedes puedan modificar el código para ver el resultado al cambiar de versión de bootstrap Commented el 28 mar. 2018 a las 22:24

2 respuestas 2

20
+50

Antes que nada, quiero aclarar que no conozco Angular, y asumo por lo que dice el OP que la estructura del HTML generado no se puede modificar por algún motivo.

El problema en este caso y por el cual no funciona el código con Bootstrap 4 (pero sí con Bootstrap 3), es porque la versión 4 utiliza flexbox para generar sus layouts de grillas, mientras la versión 3 utiliza el típico y antiguo esquema de float: left con elementos de bloque.

Flexbox es un Box Module de CSS que fue diseñado para generar layouts unidimensionales, o sea, en una sola dirección, bien sea columnas o filas.

En este caso se intenta generar un layout bidimensional, lo cual lo convierte una grilla y por lo cual Flexbox "se queda corto". Para eso existen las Grillas de CSS. Ver ejemplos básicos de grillas.

Hay muchas soluciones a este problema, y teniendo en cuenta que no hay una flexibilidad a nivel de HTML ni del framework CSS utilizado, hay que plantear una solución que personalmente no prefiero, ni me parece la más adecuada o "limpia".

Mi solución consiste en retroceder y "emular" el comportamiento de Bootstrap 3 para esta "grilla" específica, devolviendo el contenedor .row a que sea un bloque (y no un contenedor de flexbox), y haciendo que las columnas de dicho "row" utilicen float: left;

.titulo {
  height: 200px;
  background: #666;
  border: 1px solid #333;
}

.dato {
  height: 100px;
  background: #666;
  border: 1px solid #333;
}

.row {
  display: block !important;
}

[class*="col-md-"] {
  float: left;
}
<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>

Considero esta la solución más sencilla, pero pueden haber mejores soluciones que esta, pero requieren probablemente un amplio refactoring:

  • Utilizar grillas para CSS y no aplicar Bootstrap a esta "grilla".
  • Utilizar un framework enfocado a grillas.
  • Cambiar la orientación de Flexbox de Bootstrap y realinear todo (complicado en mi opinión).
  • Cambiar el display a table para el contenedor.
  • Cambiar el HTML generado por Angular para que se ajuste a Bootstrap 4 (ver la respuesta de Willian).

EDICIÓN:

Gracias a la sugerencia de Mariano, vemos que no es necesario agregar CSS adicional, utilizando las clases "helper" de Bootstrap: d-block y float-left, pero sí es necesario modificar ligeramente el HTML generado por Angular.

.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 d-block">
  <div class="titulo col-lg-3 col-md-4 col-sm-4 float-left">Titulo</div>

  <div class="dato col-lg-3 col-md-4 col-sm-4 float-left">1</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4 float-left">2</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4 float-left">3</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4 float-left">4</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4 float-left">5</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4 float-left">6</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4 float-left">7</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4 float-left">8</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4 float-left">9</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4 float-left">10</div>
</div>

3
  • 1
    Excelente respuesta, vas al origen del problema, que no lo tenía presente... Detalle: para evitar agregar un CSS que aplique a toda la clase de Bootstrap, se podrían usar las clases d-block y float-left... no?
    – Mariano
    Commented el 31 mar. 2018 a las 16:30
  • 2
    Sí, sería más sencillo de hecho, pero quise mostrar el detalle en CSS "puro" y además hice la aclaración que no iba a modificar el HTML planteado por el OP en mi respuesta.
    – Shaz
    Commented el 31 mar. 2018 a las 16:36
  • 1
    No sé cómo no he visto esta respuesta antes... acabo de borrar la mía porque era casi un clon de ésta. Por aclarar sobre como afecta que el OP esté usando Angular: si declara los CSS dentro del componente , el framework se asegura de que solamente afecte el HTML de dicho componente, no hay que temer que afecte a todo elemento que use esa clase de Bootstrap Commented el 31 mar. 2018 a las 19:18
9

Bootstrap trabaja con primero filas luego columnas:

Por la tanto primero creamos una fila que contendrá 2 columnas: Dentro de la primera columna insertamos un div vacío, luego en la siguiente columna insertamos dos filas más que internamente tendrán 3 columnas.

<!DOCTYPE html>
 
<html lang="es">
 
<head>
<title>Titulo de la web</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
 
<body>
   
   <div class="container">
  <div class="row">
    <div class="col-3">
      Div 1
    </div>
    <div class="col-9">
      <div class="row">
        <div class="col-4">
          Div 2
        </div>
        <div class="col-4">
          Div 3
        </div>
        <div class="col-4">
          Div 4
        </div>
      </div>
        
      <div class="row">
        <div class="col-4">
          Div 5
        </div>
        <div class="col-4">
          Div 6
        </div>
        <div class="col-4">
          Div 7
        </div>
      </div>
      
    </div>
  
    
  </div>
  
  <div class="row">
        <div class="col-3">
          Div 8
        </div>
        <div class="col-3">
          Div 9
        </div>
        <div class="col-3">
          Div 10
        </div>
        <div class="col-3">
          Div 11
        </div>
      </div>
      
      <div class="row">
        <div class="col-3">
          Div 12
        </div>
        <div class="col-3">
          Div 13
        </div>
        <div class="col-3">
          Div 14
        </div>
        <div class="col-3">
          Div 15
        </div>
      </div>
  
</div>
   
</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

4
  • completa tu respuesta que hace ese código?
    – user75901
    Commented el 28 mar. 2018 a las 19:57
  • Esa es la manera, muy bien. Commented el 28 mar. 2018 a las 20:05
  • 1
    El problema es que yo armo las cajas pequeñas dinámicamente con un ngFor de angular, por lo tanto dividirlas dentro de contenedores así como planteas no creo que sea factible, pero gracias. Commented el 28 mar. 2018 a las 20:06
  • Hasta donde entiendo, con esta grilla se pierde la parte responsiva del código de la pregunta. En el código del autor, se generan 3 columnas para sm y 4 columnas para lg. Con tu respuesta serían siempre 4 columnas.
    – Mariano
    Commented el 31 mar. 2018 a las 16:52

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.