web-dev-qa-db-fra.com

Effacer les lignes lors de la création de colonnes multi-réactives

Ce titre n'est peut-être pas très précis, mais voici la situation:

The html that does not look properThe view that does not look proper Comme vous pouvez le voir dans le HTML, Le système de grille va de 4 images sur des écrans xl pour 3 sur les écrans lg à 2 sur rien de moins.

J'essaie de l'afficher correctement, c'est-à-dire la quantité d'images appropriée pour chaque taille d'écran. Cependant, quelque chose de funky se passe et ne peut tout à fait comprendre en utilisant des classes d'amorçage. 

Il me semble que je devrais ajouter des lignes de manière dynamique à chaque point de rupture.

Aucune suggestion?

-- METTRE À JOUR -- Je viens de me rendre compte que col-xl- * n'existe pas. Cependant, cela ne change rien à la situation. Veuillez ignorer la déclaration xl.

- MISE À JOUR 2 - Images mises à jour.

- MISE À JOUR 3 -.__ Je vais essayer de clarifier mon objectif. Pour cette image spécifique jointe dans mon message, je voudrais que 3 cases apparaissent par rangée - pas toutes les couleurs vives.

Quand il se réduit à 2 boîtes par ligne (périphérique xs), je veux être sûr que chaque ligne contient 2 boîtes.

twitter-bootstraptwitter-bootstrap-3grid-system
55
karns

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 voici comment je l'ai fait:

<div class="row">
    <div class="col-sm-6 col-md-4"></div>
    <div class="col-sm-6 col-md-4"></div>
    <div class="clearfix visible-sm"></div>
    <div class="col-sm-6 col-md-4"></div>
    <div class="clearfix visible-md"></div>
    <div class="col-sm-6 col-md-4"></div>
    <div class="clearfix visible-sm"></div>
    <div class="col-sm-6 col-md-4"></div>
    <div class="col-sm-6 col-md-4"></div>
    <div class="clearfix visible-md"></div>
    <div class="clearfix visible-sm"></div>
    <div class="col-sm-6 col-md-4"></div>
</div>

J'ai donc 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: À compter de Bootstrap v3.2.0, les classes .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 approximativement équivalents à .visible - * - block, à l’exception des cas spéciaux supplémentaires pour les éléments liés au basculement.

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

40
Dygestor

Prolongez 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:

<div class="row auto-clear">
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
        <p>Hey</p>
    </div>
</div>

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

62
Jonas Äppelgran

Un correctif .scss utilisant des variables d'amorçage, issues de @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);
  }
}
11
KFunk

La raison de la rupture de votre mise en page est due à la hauteur dynamique des images présentées. La solution est simple, il suffit de limiter la hauteur des images. Par exemple

HTML

<div class="container">
  <div class="row">
    <div id="uploaded">
      <div class="col-xs-6 col-lg-4">
        <div class="file-block">
          <div class="file-thumbnail">
            <img src="http://placehold.it/200x500" alt="">
          </div>
          <div class="file-row-footer">
            <a href="javascript:void(0)"> Delete</a>
          </div>
        </div>
      </div>

      <div class="col-xs-6 col-lg-4">
        <div class="file-block">
          <div class="file-thumbnail">
            <img src="http://placehold.it/200x500" alt="">
          </div>
          <div class="file-row-footer">
            <a href="javascript:void(0)"> Delete</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

Consultez le CodePen pour le voir en action. J'espère que cela t'aides.

3
Bart Jedrocha

Vous pouvez résoudre ce problème très facilement avec css si vous n'avez pas besoin de supporter IE8.

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

Voir exemples

1
Rob

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-Ig-4).

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

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

Note : Cela nécessite toujours que les colonnes aient la même taille.

HTML

<div class="row auto-clear-xs auto-clear-lg">
    <div class="col-xs-6 col-lg-3">
        <p>Hey</p>
    </div>
</div>

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;
  }
}
1
e.g-m

Il semblerait que la seule solution à votre problème consiste à définir une hauteur minimale ou minimale pour vos éléments afin d'éviter toute incohérence.

ajoute ça:

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

... réglez la hauteur en fonction de vos besoins

0
scooterlord

C'est en fait ce que c'est censé être. La grille Bootstrap est composée de 12 colonnes. Vous lui indiquez de définir un élément d'un lg sur 4/12, un troisième et un élément xs sur 6/12, soit la moitié de sa largeur.

Si vous cochez le style appliqué, vous verrez que col-xs-6 revient au même que 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 grille 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, vous devriez obtenir le nombre correct de boîtes par ligne.

0
Faro

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

Classes disponibles

  • Les classes .hidden-*-up masquent l'élément lorsque la fenêtre est au point d'arrêt donné ou plus large. Par exemple, .hidden-md-up masque un élément sur les vuesport moyennes, grandes et très grandes.
  • Les classes .hidden-*-down masquent l'élément lorsque la fenêtre est au point d'arrêt donné ou à une taille inférieure. 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'utilitaire sensible «visible»/«show»; vous rendez un élément visible simplement en ne le cachant pas à ce point d'arrêt Taille.
  • Vous pouvez combiner une classe .hidden-*-up avec une classe .hidden-*-down pour afficher un élément uniquement sur un intervalle donné de tailles d'écran. Pour Par exemple, .hidden-sm-down.hidden-xl-up affiche l’élément uniquement sur fenêtres moyennes et grandes. Utilisation de plusieurs classes .hidden-*-up ou plusieurs classes .hidden-*-down est redondant et inutile.
  • Ces classes ne tentent pas de prendre en charge les cas moins courants où la visibilité d’un élément ne peut pas être exprimée sous la forme d’un seul élément contigu. gamme de tailles de points d'arrêt de la fenêtre d'affichage; vous aurez plutôt besoin d'utiliser CSS personnalisé dans de tels cas.

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

0
matt

Je cherchais une solution également et, mon HTML étant rendu via un système de gestion de contenu, je ne pouvais utiliser la solution de la réponse acceptée.

Donc ma solution est:

.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;
    }
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row teaser">
    <div class="col-sm-6 col-md-4">div1</div>
    <div class="col-sm-6 col-md-4">div2<br>more content</div>
    <div class="col-sm-6 col-md-4">div3</div>
    <div class="col-sm-6 col-md-4">div4</div>
    <div class="col-sm-6 col-md-4">div5<br>more content content<br>content</div>
    <div class="col-sm-6 col-md-4">div6</div>
    <div class="col-sm-6 col-md-4">div7<br>more content</div>
    <div class="col-sm-6 col-md-4">div8</div>
</div>

J'espère que cela aide quelqu'un :-)

0
chris

Dans le cas où votre nombre de cases col- dans une ligne estDYNAMICet que sa résolution est différente, comme dans mon cas, l'opérateur de module est basé sur vos classes col-. Prenons l'exemple de l'exemple ci-dessous.

<div class="row">
    <?php $elementCounter = 0; ?>
    <?php foreach ( $this->programs as $program ): ?>
        <div class="col-xs-6 col-sm-3"> DATA </div>
        <?php $elementCounter++; ?>
        <?php if( $elementCounter % 4 == 0 ): ?>
            <div class="clearfix hidden-xs"></div>
        <?php elseif( $elementCounter % 2 == 0 ): ?>
            <div class="clearfix visible-xs"></div>
        <?php endif; ?>
    <?php endforeach; ?>
</div>

col-xs-6 signifie qu'il a 2 cases d'affilée pour les très petits appareils. donc pour cela, j'ai ajouté cette condition $elementCounter % 2 == 0, donc c'est vrai pour chaque deuxième élément (APRÈS). et ajouté clearfix avec visible-xs afin que cela ne soit pas valable pour le bureau ou d'autres résolutions.

col-sm-3 signifie 4 cases dans la rangée pour les petits appareils et les appareils précédents. Dans ce cas, j’ai ajouté $elementCounter % 4 == 0 et avec ce hidden-xs afin que clearfix soit masqué pour les appareils xs et soit visible pour les petites unités et les unités supérieures. De cette façon, vous pouvez le modifier en conséquence.

0
Shahzaib Hayat Khan