Comment éliminer les lacunes dans les lignes d'amorçage empilées ?

Espaces dans les lignes Bootstrap empilées : solutions

Dans les grilles basées sur Bootstrap, il est courant de rencontrer des problèmes d'espaces lorsque des tuiles de différentes hauteurs s'empilent . Pour résoudre ce problème, envisagez les approches suivantes :

1. Définir les hauteurs des éléments :

Attribuez une hauteur fixe à tous les éléments du portefeuille pour garantir un alignement cohérent.

2. Disposition de la maçonnerie :

Utilisez un outil tel que la maçonnerie pour ajuster automatiquement la hauteur des éléments et les adapter à l'espace disponible.

3. Réinitialisation des colonnes réactives :

Bootstrap fournit des « réinitialisations de colonnes réactives ». En appliquant ces classes à votre grille, vous pouvez définir dynamiquement la hauteur des colonnes et éviter les espaces.

4. Clearfix avec Media Queries :

Après chaque élément, ajoutez un div avec un mini clearfix. Cela peut être masqué à l'aide de requêtes multimédias, résolvant ainsi efficacement le problème des écarts.

Exemple de code :

<div class="row portfolio">
  <div class="col-lg-2 col-sm-3 col-xs-4">
    <div class="panel panel-default">
      ... (Element content)
    </div>
  </div>
  <div class="clear"></div>  <!-- Added after each element -->
  ... (Additional elements)
</div>

@media (max-width: 767px) {
  .portfolio > .clear:nth-child(6n)::before {
    /* Clearfix for mobile devices */
  }
}

Approche jQuery :

var row=$('.portfolio');
$.each(row, function() {
  var maxh = 0;
  $.each($(this).find('div[class^="col-"]'), function() {
    if($(this).height() > maxh)
      maxh = $(this).height();
  });
  $.each($(this).find('div[class^="col-"]'), function() {
    $(this).height(maxh); // Set element heights uniformly
  });
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!