Effacer les lignes lors de l’utilisation de colonnes multi-sensibles – Bootstrap

Ce titre pourrait ne pas être très précis mais voici la situation:

Le HTML qui ne semble pas correctLa vue qui ne semble pas correcte Comme vous pouvez le voir dans le HTML, le système de grid va de 4 images sur les écrans xl à 3 sur les écrans LG à 2 sur tout autre.

J’essaie de l’afficher correctement – la quantité d’images appropriée à chaque taille d’écran, c’est-à-dire. Cependant, quelque chose de génial se passe et ne peut pas tout à fait comprendre en utilisant des classes bootstraps.

Il me semble que je devrais append des lignes dynamicment à chaque sharepoint rupture.

Aucune suggestion?

– UPDATE – Je viens de réaliser que col-xl- * n’existe pas. Cependant, cela ne change rien à la situation. Veuillez ne pas tenir compte de la déclaration xl.

– UPDATE 2 – Mise à jour des images.

– MISE À JOUR 3 – Je vais essayer de clarifier mon objective. Pour cette image spécifique jointe dans mon post, je voudrais que 3 cases apparaissent par ligne, pas toutes.

Quand il se réduit à 2 cases par ligne (périphérique xs), je veux m’assurer que chaque ligne comporte 2 cases.

J’ai résolu ce problème en ajoutant des éléments clearfix là où ils devraient être. Je voulais 3 colonnes sur md et 2 colonnes sur sm et c’est comme ça que je l’ai fait:

 

Donc, j’ai utilisé clearfix visible-sm après chaque seconde div et clearfix visible-md après chaque troisième div. Je ne trouve pas cette solution idéale, mais cela fonctionne plutôt bien.

EDIT: À partir de Bootstrap, les classes v3.2.0 .visible-* sont obsolètes.

http://getbootstrap.com/css/#responsive-utilities :

Les classes .visible-xs, .visible-sm, .visible-md et .visible-lg existent également, mais sont obsolètes à partir de la version 3.2.0. Ils sont à peu près équivalents à .visible – * – block, sauf avec des cas spéciaux supplémentaires pour les éléments liés à la bascule.

EDIT 2: Cette solution fonctionne tant que vous ne souhaitez pas modifier CSS, si vous avez la possibilité de le faire, je vous recommande d’utiliser la réponse de Jonas car elle est beaucoup plus simple à mon avis.

Étendez votre bootstrap.css avec ce css:

 @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;} } 

Utilisez-le comme:

 

Hey

Remarque: cela nécessite l’utilisation de toutes les tailles et que tous les cols ont la même taille.

Un correctif .scss utilisant des variables bootstrap, sockets depuis @jonas et @yog

 @mixin row-first-child($col-type) { .col-#{$col-type}- { &1:nth-child(12n+1), &2:nth-child(6n+1), &3:nth-child(4n+1), &4:nth-child(3n+1), &6:nth-child(odd){ clear: left; } } } .auto-clear { @media (min-width: $screen-lg-min){ @include row-first-child(lg); } @media (min-width: $screen-md-min) and (max-width: $screen-md-max){ @include row-first-child(md); } @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max){ @include row-first-child(sm); } @media (max-width: $screen-xs-max){ @include row-first-child(xs); } } 

La raison de la rupture de votre mise en page est due à la hauteur dynamic des images présentées. Le correctif est simple cependant, il suffit de contraindre la hauteur des images. Par exemple

HTML

  

CSS

 .file-block { border: 1px solid #ccc; border-radius: 10px; margin: 20px 0px; text-align: center; } .file-thumbnail { display: block; padding: 4px; margin-bottom: 20px; line-height: 1.42857143; height: 180px; font: 0/0 a; /* remove the gap between inline(-block) elements */ } .file-thumbnail:before { content: ' '; display: inline-block; vertical-align: middle; /* vertical alignment of the inline element */ height: 100%; } .file-thumbnail img { display: inline-block; margin: 0 auto; max-width: 150px; max-height: 180px; vertical-align: middle; } 

Découvrez le CodePen pour le voir en action. J’espère que cela t’aides.

Vous pouvez résoudre ce problème très facilement avec css si vous n’avez pas besoin de prendre en charge IE8.

 .file-row-contain.col-lg-4:nth-child(3n+1), .file-row-contain.col-xs-6:nth-child(2n+1) { clear: left; } 

Voir des exemples

Ajout à la réponse de @Jonas et @ KFunk:

Solution potentielle pour exiger l’utilisation de toutes les tailles de col (col-xs-6 col-sm-4 col-md-4 col-lg-4).

Classes créées: auto-clear-xs, auto-clear-sm, auto-clear-md et auto-clear-lg.

J’ai fait ma réponse d’abord mobile.

Remarque : les colonnes doivent toujours avoir la même taille.

HTML

 

Hey

SCSS

 @mixin row-first-child($col-type, $clear-type) { .col-#{$col-type}- { &1:nth-child(12n+1), &2:nth-child(6n+1), &3:nth-child(4n+1), &4:nth-child(3n+1), &6:nth-child(odd){ clear: $clear-type; } } } .auto-clear-xs{ @media (min-width: $screen-xs-min){ @include row-first-child(xs, both); } @media (max-width: $screen-xs-min){ @include row-first-child(xs, both); } } .auto-clear-sm{ @media (min-width: $screen-sm){ @include row-first-child(xs, none); @include row-first-child(sm, both); } } .auto-clear-md{ @media (min-width: $screen-md){ @include row-first-child(xs, none); @include row-first-child(sm, none); @include row-first-child(md, both); } } .auto-clear-lg{ @media (min-width: $screen-lg){ @include row-first-child(xs, none); @include row-first-child(sm, none); @include row-first-child(md, none); @include row-first-child(lg, both); } } 

CSS

 @media (min-width: 480px) { .auto-clear-xs .col-xs-1:nth-child(12n+1), .auto-clear-xs .col-xs-2:nth-child(6n+1), .auto-clear-xs .col-xs-3:nth-child(4n+1), .auto-clear-xs .col-xs-4:nth-child(3n+1), .auto-clear-xs .col-xs-6:nth-child(odd) { clear: both; } } @media (max-width: 480px) { .auto-clear-xs .col-xs-1:nth-child(12n+1), .auto-clear-xs .col-xs-2:nth-child(6n+1), .auto-clear-xs .col-xs-3:nth-child(4n+1), .auto-clear-xs .col-xs-4:nth-child(3n+1), .auto-clear-xs .col-xs-6:nth-child(odd) { clear: both; } } @media (min-width: 768px) { .auto-clear-sm .col-xs-1:nth-child(12n+1), .auto-clear-sm .col-xs-2:nth-child(6n+1), .auto-clear-sm .col-xs-3:nth-child(4n+1), .auto-clear-sm .col-xs-4:nth-child(3n+1), .auto-clear-sm .col-xs-6:nth-child(odd) { clear: none; } .auto-clear-sm .col-sm-1:nth-child(12n+1), .auto-clear-sm .col-sm-2:nth-child(6n+1), .auto-clear-sm .col-sm-3:nth-child(4n+1), .auto-clear-sm .col-sm-4:nth-child(3n+1), .auto-clear-sm .col-sm-6:nth-child(odd) { clear: both; } } @media (min-width: 992px) { .auto-clear-md .col-xs-1:nth-child(12n+1), .auto-clear-md .col-xs-2:nth-child(6n+1), .auto-clear-md .col-xs-3:nth-child(4n+1), .auto-clear-md .col-xs-4:nth-child(3n+1), .auto-clear-md .col-xs-6:nth-child(odd) { clear: none; } .auto-clear-md .col-sm-1:nth-child(12n+1), .auto-clear-md .col-sm-2:nth-child(6n+1), .auto-clear-md .col-sm-3:nth-child(4n+1), .auto-clear-md .col-sm-4:nth-child(3n+1), .auto-clear-md .col-sm-6:nth-child(odd) { clear: none; } .auto-clear-md .col-md-1:nth-child(12n+1), .auto-clear-md .col-md-2:nth-child(6n+1), .auto-clear-md .col-md-3:nth-child(4n+1), .auto-clear-md .col-md-4:nth-child(3n+1), .auto-clear-md .col-md-6:nth-child(odd) { clear: both; } } @media (min-width: 1200px) { .auto-clear-lg .col-xs-1:nth-child(12n+1), .auto-clear-lg .col-xs-2:nth-child(6n+1), .auto-clear-lg .col-xs-3:nth-child(4n+1), .auto-clear-lg .col-xs-4:nth-child(3n+1), .auto-clear-lg .col-xs-6:nth-child(odd) { clear: none; } .auto-clear-lg .col-sm-1:nth-child(12n+1), .auto-clear-lg .col-sm-2:nth-child(6n+1), .auto-clear-lg .col-sm-3:nth-child(4n+1), .auto-clear-lg .col-sm-4:nth-child(3n+1), .auto-clear-lg .col-sm-6:nth-child(odd) { clear: none; } .auto-clear-lg .col-md-1:nth-child(12n+1), .auto-clear-lg .col-md-2:nth-child(6n+1), .auto-clear-lg .col-md-3:nth-child(4n+1), .auto-clear-lg .col-md-4:nth-child(3n+1), .auto-clear-lg .col-md-6:nth-child(odd) { clear: none; } .auto-clear-lg .col-lg-1:nth-child(12n+1), .auto-clear-lg .col-lg-2:nth-child(6n+1), .auto-clear-lg .col-lg-3:nth-child(4n+1), .auto-clear-lg .col-lg-4:nth-child(3n+1), .auto-clear-lg .col-lg-6:nth-child(odd) { clear: both; } } 

C’est en fait comme ça que ça doit être. La grid Bootstrap se compose de 12 colonnes, vous lui dites de dimensionner un élément lg à 4/12, soit un troisième et un élément xs à 6/12, soit la moitié de la largeur disponible.

Si vous vérifiez le style appliqué, vous verrez que col-xs-6 équivaut à définir la largeur d’un élément à 50% et 33,33% pour col-lg-4.

Vous pouvez en savoir plus sur le système de grid ici

EDIT: Je pense que je comprends votre problème maintenant, sans voir votre code, je ne peux probablement pas vous donner une solution exacte. Cependant, le problème semble être la hauteur variable de vos boîtes, si vous les avez toutes à la même hauteur, cela devrait vous donner la bonne quantité de boîtes par ligne.

La seule solution à votre problème est de définir une hauteur minimale ou une hauteur fixe pour vos éléments, sans aucune incohérence causant vos problèmes.

Ajoute ça:

 .file-row-contain { min-height:250px; } 

… régler la hauteur en fonction de vos besoins

Je cherchais aussi une solution et comme mon HTML est rendu via un CMS, je ne pouvais pas utiliser la solution de la réponse acceptée.

Donc, ma solution est la suivante:

 .teaser { // break into new line after last element > div:last-child { clear: right; } } .teaser { // two colums @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { > div:nth-child(2n+1) { clear: left; } } } .teaser { // three colums @media (min-width: @screen-md-min) { > div:nth-child(3n+1) { clear: left; } } } 
  
div1
div2
more content
div3
div4
div5
more content content
content
div6
div7
more content
div8

Bootstrap 4 introduit hidden-*-down classes hidden-*-up et hidden-*-down . Utilité très pratique (et élégante) pour de telles situations.

Classes disponibles

  • Les .hidden-*-up masquent l’élément lorsque la fenêtre d’affichage est au point d’arrêt donné ou plus large. Par exemple, .hidden-md-up masque un élément dans les fenêtres de taille moyenne, grande et extra-large.
  • Les .hidden-*-down masquent l’élément lorsque la fenêtre d’affichage est au point d’arrêt donné ou plus petite. Par exemple, .hidden-md-down masque un élément dans les fenêtres extra-petites, petites et moyennes.
  • Il n’y a pas de classe d’utilité explicite “visible” / “show” responsive; vous rendez un élément visible en ne le cachant simplement pas à la taille de ce point d’arrêt.
  • Vous pouvez combiner une .hidden-*-up avec une classe .hidden-*-down pour afficher un élément uniquement sur un intervalle donné de tailles d’écran. Par exemple, .hidden-sm-down.hidden-xl-up montre l’élément que dans les grandes et moyennes fenêtres. L’utilisation de plusieurs .hidden-*-up ou de plusieurs classes .hidden-*-down est redondante et inutile.
  • Ces classes ne tentent pas de prendre en charge des cas moins courants où la visibilité d’un élément ne peut pas être exprimée sous la forme d’une seule plage contiguë de tailles de point d’arrêt de fenêtre d’affichage. vous devrez plutôt utiliser des CSS personnalisés dans de tels cas.

http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

Dans le cas où votre nombre de cases dans une ligne est DYNAMIQUE et différent pour la résolution comme dans mon cas, en fonction de vos classes, col- l’opérateur de module. Prenons l’exemple de l’exemple ci-dessous.

 
programs as $program ): ?>
DATA

col-xs-6 signifie qu’il y a 2 cases à la suite pour les petits périphériques. donc pour cela j’ai ajouté la condition $elementCounter % 2 == 0 donc c’est vrai pour chaque second élément (AFTER). et ajouté clearfix avec visible-xs donc il ne devrait pas affecter les résolutions de bureau ou autres.

col-sm-3 signifie 4 cases en ligne pour les périphériques petits et supérieurs, donc dans ce cas j’ai ajouté $elementCounter % 4 == 0 et avec hidden-xs pour que clearfix soit caché pour les périphériques xs et soit visible pour les petits et ci-dessus. De cette façon, vous pouvez le modifier en conséquence.