web-dev-qa-db-fra.com

Bootstrap 3 grille avec une hauteur différente dans chaque élément - est-il possible de le résoudre à l'aide de CSS uniquement?

J'essaie de créer une grille de vignettes, où chaque vignette comporte une image et une étiquette. Cela fonctionne bien si toutes les étiquettes ont la même longueur, car toutes les vignettes ont la même hauteur:

http://www.bootply.com/iSqwWyx5ms

Toutefois, si je réduis le texte de la vignette la plus à droite, une partie de la ligne ci-dessous est poussée dans une nouvelle ligne, comme illustré ci-dessous:

http://www.bootply.com/Wqd021aaeM

Ce que je voudrais, c’est que la deuxième rangée commence au point le plus bas où se termine la première rangée.

Je sais que je peux le résoudre avec JavaScript - trouvez la vignette la plus longue dans chaque rangée et définissez les autres vignettes sur cette hauteur. La question est, ai-je un moyen de le faire, ou quelque chose d'autre qui peut résoudre mon problème, en utilisant uniquement avec CSS?

Mise à jour: Je ne sais pas à l’avance combien d’éléments je possède dans une rangée. Par exemple, sur un petit écran, j'aurais 2 éléments d'affilée, alors que sur un écran plus grand, ce sera 3, donc les solutions qui définissent le début d'une nouvelle ligne ne me conviennent pas.

htmlcsstwitter-bootstraptwitter-bootstrap-3
42
haimlit

Tu devrais utiliser .clearfix, comme décrit dans la section Grid responsive resets de la documentation Bootstrap: https://getbootstrap.com/docs/3.3/css/#grid-responsive-resets)

38
gbellmann

Si vous ne savez pas combien de colonnes vous avez, vous pouvez faire:

.row.fix {
  display: flex;
  flex-wrap: wrap;
  width:100%; /*not always necessary*/
}

Violon de travail: https://jsfiddle.net/wqdm1jjt/

Exemple: enter image description here

Auteur: Juan Miguel

35
Lucas Bustamante

Je pense qu'il vaut mieux utiliser quelques rangées de js. Avec CSS, vous ne pouvez avoir qu'une nouvelle "ligne" utilisant clearfix class (comme indiqué précédemment), mais chaque div aura une hauteur différente. Si vous souhaitez définir la même hauteur pour chaque div dynamic , je pense que vous ne pouvez le faire que par js.

  $(document).ready(function() {
    var maxHeight = 0;          
    $(".equalize").each(function(){
      if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
    });         
    $(".equalize").height(maxHeight);
  });

Voici une démonstration démo basée sur votre code.

Tout ce que vous avez à faire est de donner la même classe à chaque principal div à l'intérieur du col - , et ensuite d'exécuter une fonction each() dans js qui donne à eux la même hauteur (le max-un).

Votre structure HTML devrait ressembler à ça:

<div class="container">
  <div class="col-md-4">
    <div class="thumbnail equalize">

      <!-- your HTML content -->

    </div> <!-- /.thumbnail equalize -->
  </div> <!-- /.col-md-4 -->
</div> <!-- /.container -->
7
Francesco Bancalari

vous pourriez utiliser clear: left et appliquez-le à chaque premier enfant de la rangée. Par exemple, si vous avez 4 éléments en ligne, vous pouvez utiliser:

.my-row>:nth-child(3n+1) {  
  clear:left;
  background-color: red; // just to see if the first item in row is matched
}
6
Glogo

Vous pouvez utiliser le même truc que j'ai décrit dans ce réponse.

Dans votre cas, vous voudriez que les requêtes de support ressemblent à ceci:

@media (min-width: 768px) and (max-width: 991px) {
    .portfolio>.clear:nth-child(4n+4)::before {
      content: '';
      display: table;
      clear: both;
    }
}
@media (min-width: 992px) {
    .portfolio>.clear:nth-child(6n+6)::before {  
      content: '';
      display: table;
      clear: both;
    }
}

768px - 991px est la taille sm, vous avez col-sm-2, vous voulez donc que toutes les 4 div soient effacées. 992px et plus se rapportent à la taille md, où vous avez col-md-3, vous voulez donc que toutes les 6 div divisent à cette taille. C'est beaucoup plus facile que d'utiliser les réinitialisations réactives, même si elles reposent exactement sur le même principe.

P.S. J'ai ajouté une div avec la classe row à l'intérieur de votre conteneur (car vous en avez besoin d'une dans un conteneur sinon vous aurez un double remplissage à l'extérieur) et je lui ai également donné une classe de portefeuille pour un ciblage facile. Voici votre mise à jour Bootply.

6
jme11

Vous pouvez également faire un clearfix CSS comme celui-ci. Ajoutez simplement auto-clear au row.

@media (min-width:1200px){
    .auto-clear .col-lg-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-lg-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-lg-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-lg-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-lg-6:nth-child(odd){clear:left;}
}
@media (min-width:992px) and (max-width:1199px){
    .auto-clear .col-md-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-md-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-md-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-md-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-md-6:nth-child(odd){clear:left;}
}
@media (min-width:768px) and (max-width:991px){
    .auto-clear .col-sm-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-sm-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-sm-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-sm-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-sm-6:nth-child(odd){clear:left;}
}
@media (max-width:767px){
    .auto-clear .col-xs-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-xs-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-xs-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-xs-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-xs-6:nth-child(odd){clear:left;}
}

http://www.codeply.com/go/lUbs1JgXUd

2
Zim

Si vous savez combien de vignettes ont votre arrangement, vous pouvez utiliser <div class="row"></div> pour envelopper les vignettes par groupes de trois (ou N).

Sinon, la solution de contournement consisterait à définir une hauteur fixe pour l'élément miniature. Sur votre exemple

.thumbnail {
   height:420px; 
}

Toutefois, si la hauteur et le texte de votre vignette peuvent varier beaucoup, cela semblera gênant ou masquera une partie de img/label.

1
amenadiel

Pourquoi n'utilisez-vous pas le <div class="row"></div> Regardez cela http://www.bootply.com/6bIZkSGcA1

C'est ce que tu voulais.??

P.S. Cela limitera directement les limites à une ligne.

0
Khushal Dave