web-dev-qa-db-fra.com

Problèmes de mise en forme de grille fluide avec Bootstrap 3?

J'utilise Bootstrap 3 pour mettre en page mon site Web avec une grille fluide, mais les cases de la grille ne s'alignent pas dans une rangée.

Tu peux voir: enter image description here

Lorsqu'une boîte est plus grande qu'une autre, la grille n'est pas laissée alignée.

Comment puis-je le réparer avec un peu de piratage? Merci pour l'aide!

Remarque: la hauteur de la boîte est le contenu de l'enroulement automatique.

Mon code html

    <div class="row">
     <?php foreach($contens as $content){?>
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
       <div class="contents-block">
        <div class="image"><img href="<?php echo $content['image'];?>" />
        </div>
            ................ some code .............
       </div>
      </div>
    <?php } ?>
   </div>
csstwitter-bootstraptwitter-bootstrap-3
20
Peter Jack

Je ne sais pas exactement ce que vous essayez d'accomplir, mais le problème est dû au fait que le contenu des colonnes varie en hauteur . Il existe 3 approches globales pour résoudre les problèmes d'alignement/hauteur de la grille.

1. Une approche CSS uniquement (avec une largeur de colonne CSS3) comme celle-ci.

http://bootply.com/85737

2. Une approche 'clearfix' comme celle-ci (nécessite une itération toutes les x colonnes). C’est l’approche recommandée par Bootstrap appelée "réinitialisations réactives" ..

http://bootply.com/89910 (il y a aussi une version uniquement en CSS variation de cette approche)

3. Enfin, vous voudrez peut-être utiliser le plug-in Isotope/Masonry. Voici un exemple de travail utilisant Isotope + Bootstrap ..

http://bootply.com/61482

Mise à jour 2017

Une autre option consiste à donner aux colonnes la même hauteur (en utilisant flexbox):

Comme le problème est dû à la hauteur {différence}, vous pouvez créer des colonnes égales hauteur sur chaque ligne. Flexbox est le meilleur moyen de le faire et est pris en charge de manière native dans Bootstrap 4.

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

Démo Flexbox égale hauteur

Plus d'informations sur les colonnes Bootstrap à hauteur variable

23
Zim

J'avais un problème similaire. J'ai corrigé avec ce script assez rapidement et sans douleur:

<script>
  $.getScript('//cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.js',function(){
    $('#container').isotope({
      itemSelector : '.items',
      layoutMode : 'fitRows'
    });
  });
</script>

dans votre cas, vous devrez ajouter un ID de conteneur, par exemple. '#container' et ajoutez la classe à chaque élément, par exemple. '.article'

3
Adrian

Appliquez une hauteur pour chaque colonne <div>.

Je donnerais à vos colonnes un nom de classe:

<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 outer">
    ...
</div>

Et ensuite, fais quelque chose comme ça:

.outer {
    height: 200px /* Or whatever the height really is */
}

Vos colonnes sont disposées bizarrement à cause de la hauteur variable des cases. Appliquer une hauteur à l'élément conteneur résoudra le problème.

La meilleure partie est que cela ne vous oblige pas à ajouter des <div> aléatoires qui n'ont rien à voir avec le contenu.

MODIFIER:  

Vous pouvez également appliquer la hauteur uniquement lorsque vous utilisez les points d'arrêt «sm» et les niveaux supérieurs.

Cela garantirait que tout s'aligne lorsque les colonnes sont utilisées et qu'il n'y aura pas de grands espaces entre chacune d'elles lorsqu'elles auront la pleine largeur (c'est-à-dire col-xs-12).

@media (min-width: 768px) {
    .outer {
        height: 200px /* Or whatever */
    }
}
3
ahuth

Voici une solution jQuery super simple pour aligner tous les éléments.

J'ai résolu ce problème en obtenant la colonne dont la hauteur était la plus haute et en définissant cette hauteur à toutes les autres colonnes. Essayez l'extrait ci-dessous.

setTimeout(function(){
  var maxHeight = 0;
  $('.item').each(function() {if ($(this).height() > maxHeight){maxHeight = $(this).height()}});
  $('.item').each(function() {$(this).height(maxHeight)});
}, 1000);
.item {
  border: 1px solid black;
}
.big {
  height:50px;
  background-color:Fuchsia;
}
.normal {
  height:40px;
  background-color:aqua;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
	<div class="col-xs-4 item big">I am big</div>
	<div class="col-xs-4 item normal">I am normal</div>
	<div class="col-xs-4 item normal">I am normal</div>
	<div class="col-xs-4 item normal">I am normal</div>
	<div class="col-xs-4 item normal">I am normal</div>	
	<div class="col-xs-4 item normal">I am normal</div>
</div>

1
fnkrm

Ma solution: J'ai travaillé avec les classes visibles de bootstrap 3

<div class="row">
<?php 
    $indexLg = 1;
    $indexSm = 1;
    foreach($contens as $content) {?>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
        <div class="contents-block">
            <div class="image"><img href="<?php echo $content['image'];?>" />
            </div>
        </div>
    </div>
<?php
    if($indexLg%4 == 0) {
        $indexLg = 1;
        ?>
            <div class="clearfix visible-lg visible-md"></div>
        <?php
    } 
    if($indexSm%2 == 0) {
        $indexSm = 1;
        ?>
            <div class="clearfix visible-sm"></div>
        <?php
    }
    ?>
        <div class="clearfix visible-xs"></div>
    <?php
    }
} ?>

0
Dieter Casier

Je suis d'accord avec Skelly sur le fait qu'un plug-in de maçonnerie est probablement la solution, mais pour une solution rapide et simple, vous pouvez créer une nouvelle ligne chaque fois que vous souhaitez que quelque chose reste aligné. fenêtres d'affichage.

0
EnduroDave

Je pense que vous devez utiliser clearfix. il suffit de mettre la variable classclearfix sur votre élément parent (dans votre cas, row, je pense) et de le mettre dans votre css:

.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
 }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
0
Samia Ruponti