así que estoy construyendo este sitio web de aprendizaje en línea, y tengo un catálogo de todos los cursos donde puede buscar cursos cuyos títulos o descripciones contienen la entrada en la barra de búsqueda. Usé tarjetas de arranque para hacer el catálogo. Funciona bien, pero en el escritorio obtengo espacios vacíos en lugar de las tarjetas que están ocultas, y los resultados muestran grandes espacios vacíos entre ellos si hubo cursos en el medio, etc. No hay problema en el móvil, todos los resultados aparecen verticalmente uno tras otro. otro. ¿Hay alguna manera de evitar eso? ¡Gracias!

Imagen para ver los "espacios vacíos"

Código JS:

 $('#live_search').on('keyup', function() { let input = $(this).val(); $('.card').hide(); $('.card').filter(function() { return new RegExp(input, 'i').test($(this).text()) }).show(); });

Tarjetas:

 <div class="search"> <form> <label for="live_search">Rechercher une formation :</label> <input type="text" id="live_search" size="30" class="form-control" placeholder="Rechercher une formation" /> </form> </div> <br> <div class="container px-5 mb-3"> <div class="row"> {% for formation in formations %} <div class="col-md-4"> <div class="card"> <img class="card-img-top" src="{{ vich_uploader_asset(formation, 'imageFile') }}" alt="{{ formation.imageName }}"> <div class="card-body"> <h5 class="card-title">{{ formation.title }}</h5> <p class="card-text">{{ formation.description }}</p> <a class="small btn btn-success custom-btn rounded-pill px-3" href="{{path('app_formations_see', {'id' : formation.id })}}" role="button">voir</a> <span class="small">par {{ formation.user.firstname }} {{ formation.user.lastname }}</span> </div> </div> </div> {% endfor %} </div> </div>