javascript - not - Desplazamiento de la columna de la red Bootstrap

tooltip bootstrap 4/

Question

Me está costando entender la estructura de clearfix de columna en bootstrap. Intento crear un diseño de tarjeta, que necesita que todas las filas del diseño tengan la misma altura, pero el contenido de cada entrada no es necesariamente el mismo. Puede ver un ejemplo de lo que estoy haciendo aquí: https://demo.eap.soa.com/content/test/staticapps.html

Parte de la dificultad es que estoy usando una plantilla de manubrios para producir el contenido:

<script id="Handlebars-Template" type="text/x-handlebars-template">
<div class="row">
  {{#each apps}}
  <div class="col-md-4">
    <h4>{{title}}</h4>
    <p>{{description}}</p>
  </div>
  {{/each}}
</div>
</script>

Por lo tanto, no es fácil insertar un divisor de compensación vacío en cada X entradas, o incluso necesariamente para saber qué se supone que X debe ser.

Puedo hackearlo usando una altura mínima en la clase col-md-4, pero eso parece bastante feo.

Alguna idea aqui?

Gracias.

Answer 1

No sé si esta respuesta puede ayudarte.

El contenido de tu div ya está cambiando como dijiste, por lo que una forma será pedir javascript cuando el documento esté listo.

Solo tiene que verificar la altura máxima de cada div específico y aplicarlo en cada div.

Aquí hay un tipo de código en acción: http://bootply.com/103561

Solo eso, lo siento porque cuando escribí el código, estaba en las nubes, y el var mini no es significativo, debería llamarse '' maxi '' ...

Y este mismo código en visu:

$(document).ready(  makeDivSimilar  );

function makeDivSimilar()
{
  var mini = 0;
  $(''.col-md-4'').each(function(){
      if(parseInt($(this).css(''height'')) > mini )
      {
        mini = parseInt($(this).css(''height''));
      }  
  });
  $(''.col-md-4'').css(''height'',mini);  
}