Bootstrap grille de miniatures de ne pas commencer une nouvelle ligne correctement

J'ai une grille de vignettes oin mon application rails, mais j'ai de la difficulté à obtenir de bootstrap pour afficher correctement la grille! Comme vous pouvez le voir ci-dessous il n'est cependant pas le démarrage d'une nouvelle ligne correctement! vous ne savez pas quoi faire ici. J'ai inclus mon code HTML ci-dessous et aussi loin que je peux voir, il est conforme à l'amorçage des exemples.

<div id="image-grid" class="col-lg-10">
<div class="row">
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/1"> 
<img alt="Img 0259" src="/system/images/images/000/000/001/thumb/IMG_0259.JPG?1369368826">
2013-05-24
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/3"> 
<img alt="Img 0034" src="/system/images/images/000/000/003/thumb/IMG_0034.JPG?1369649370">
2013-05-27
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/2"> 
<img alt="Img 0008" src="/system/images/images/000/000/002/thumb/IMG_0008.jpg?1369649198">
2013-05-27
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/4"> 
<img alt="Rsz 1971061 10153145204760484 336557482 n" src="/system/images/images/000/000/004/thumb/rsz_1971061_10153145204760484_336557482_n.jpg?1377656209">
2013-08-28
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/5"> 
<img alt="Digital radiograph1" src="/system/images/images/000/000/005/thumb/digital_radiograph1.jpg?1377659810">
2013-08-28
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/6"> 
<img alt="Pamo" src="/system/images/images/000/000/006/thumb/pamo.jpg?1377659876">
2013-08-28
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/7"> 
<img alt="Tooth x ray 1" src="/system/images/images/000/000/007/thumb/tooth-x-ray_1.jpg?1377659952">
2013-08-28
</a>            </div>  
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/8"> 
<img alt="Fig9b" src="/system/images/images/000/000/008/thumb/fig9b.jpg?1377664192">
2013-08-28
</a></div>
<div class="col-sm-6 col-md-2"> 
<span class="glyphicon glyphicon-plus">
<a href="/images/new">Upload New Image</a>
</span>
</div>
</div>
</div>

Le nombre de colonnes dans chaque ligne (comme vous le savez peut-être) a ajouter jusqu'à 12 (ou ce que vous avez défini pour le nombre de colonnes d'une ligne). Est-il une raison pourquoi vous n'avez qu'une ligne de classe, et non pas d'habillage des colonnes dans la ligne des classes? La façon dont vous l'avez droit maintenant, c'est qu'il y a 36 colonnes(sm) dans votre seule ligne de classe.
Amin merci, je me rends compte que le nombre de colonnes doit ajouter jusqu'à 12 mais je crois que dans le cas de vignettes, il doit déborder sur une nouvelle ligne dans le cas où il y a de trop nombreux sur une ligne. J'ai été thinkng il pourrait être dû à la différence de hauteurs des images
Ainsi, en 2017, vous devez vous appuyer sur JS logique pour résoudre ce alors.... ok....

OriginalL'auteur mattclar | 2013-09-15

7

C'est une hauteur du problème.

Je suis résoudre la même chose à l'instant, et en gros, vous avez deux options si vous voulez abandonner le superflu rangée de conteneurs, et d'avoir l'ensemble des colonnes de la grille en une seule ligne de réactivité:
1. vous pouvez assurez-vous que tous les éléments de votre grille sont de la même hauteur de limiter le contenu en css (ou tout simplement en contrôlant le contenu qui obtient poussé dans chaque élément)
2. Vous pouvez ajouter un peu de jQuery code dans votre page pour analyser votre vignette d'éléments et d'élargir leurs conteneurs à la même hauteur que le plus grand élément de la grille. Autour de Google pour l'égalité hauteur de plugins jQuery—il y a un tas. Une autre chose que vous aurez besoin pour vous assurer que vous faire aussi, c'est de déclencher le plugin nouveau sur redimensionner, car il est probable que vos éléments de vent jusqu'à des hauteurs différentes, à nouveau en raison de la réactivité des comportements permettant de contenu pour agrandir/réduire. Une combinaison de bootstrap du col de classes et un peu de jQuery hauteur d'équilibrage fonctionne très bien pour moi.
Merci!! c'est maintenant le travail pour moi 🙂 heureusement, j'ai mis ma taille de vignette, côté serveur, le problème était à venir quand ils étaient non standard des proportions et des orientations. Donc j'ai juste utilisé un peu de CSS, si il ne marche pas mal regarder dans une solution d'activer javascript. Merci pour votre aide!

OriginalL'auteur Timichango

J'ai eu un problème similaire. Je le fixe avec ce script assez rapidement et sans douleur gratuit:

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

pour votre cas, remplacer "#projects_container' pour '#image-grille " et ajouter une classe pour chaque élément div.

OriginalL'auteur Adrian

Veuillez décrire ou d'ajouter des images à montrer comment votre grille doit regarder (desktop, tablette et mobile). Maintenant, nous avons à deviner.

Une ligne avec classe col-md-2 colomns peut contenir 6 colonnes (6 x 2 = 12). Essayez le code ci-dessous, avec des colonnes imbriquées (voir: http://getbootstrap.com/css/#grid-nesting).

<div class="container">     
<div class="row">
<div id="image-grid" class="col-sm-12 col-md-10">
<div class="row">
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/1"> 
<img alt="Img 0259" src="/system/images/images/000/000/001/thumb/IMG_0259.JPG?1369368826">
2013-05-24
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/3"> 
<img alt="Img 0034" src="/system/images/images/000/000/003/thumb/IMG_0034.JPG?1369649370">
2013-05-27
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/2"> 
<img alt="Img 0008" src="/system/images/images/000/000/002/thumb/IMG_0008.jpg?1369649198">
2013-05-27
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/4"> 
<img alt="Rsz 1971061 10153145204760484 336557482 n" src="/system/images/images/000/000/004/thumb/rsz_1971061_10153145204760484_336557482_n.jpg?1377656209">
2013-08-28
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/5"> 
<img alt="Digital radiograph1" src="/system/images/images/000/000/005/thumb/digital_radiograph1.jpg?1377659810">
2013-08-28
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/6"> 
<img alt="Pamo" src="/system/images/images/000/000/006/thumb/pamo.jpg?1377659876">
2013-08-28
</a>            </div>
</div>
<div class="row">
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/7"> 
<img alt="Tooth x ray 1" src="/system/images/images/000/000/007/thumb/tooth-x-ray_1.jpg?1377659952">
2013-08-28
</a>            </div>  
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/8"> 
<img alt="Fig9b" src="/system/images/images/000/000/008/thumb/fig9b.jpg?1377664192">
2013-08-28
</a></div>
</div>
</div>
<div class="col-sm-12 col-md-2"> 
<span class="glyphicon glyphicon-plus">
<a href="/images/new">Upload New Image</a>
</span>
</div>
</div>
</div>

Merci de Basse, je sais que je pourrais résoudre ce par programmation b ajout d'une nouvelle ligne tous les 6 images, MAIS cela rompt avec la nature réactive de bootstrap, si j'ajoute une nouvelle ligne tous les 6 ensuite, il aura l'air bien sur un ordinateur de bureau, mais comme vous pouvez le voir sur un petit écran, j'ai les vignettes avec une largeur de 6, ce qui signifie deux à une ligne. J'espérais une solution réactive
essayez d'utiliser sm et retirez le md et de n'utiliser sm, voir si cela aide. sm classe type de travaux comme l'ancienne durée de classes. Pas la meilleure solution mais je pense que la peine d'essayer
Voir le tableau ici: github.com/bassjobsen/woocommerce-twitterbootstrap. Je ne comprends pas pourquoi l'ajout d'une ligne de casser la responsabilité. Mais votre droite en suivant les exemples de getbootstrap.com/css/#grid-example-mixed. Ils ajoutent b.e. 3 fois xs-6 dans une rangée.

OriginalL'auteur Bass Jobsen

0

J'ai eu ce problème à l'aide de différentes tailles d'images en miniature div à l'aide de la Bootstrap3 cadre. De ce fait, les lignes et les grilles de briser en fonction de la taille des images. Mon travail a été d'utiliser un chouette petit plugin jquery appelé "égaliser" et l'a appelé à la "ligne" de la classe.

Il a parfaitement fonctionné, vous devriez lui donner un essai.

OriginalL'auteur Rob Bach

J'ai décidé d'utiliser display: inline-block et configurer manuellement le responsive colonnes au lieu d'utiliser la col-X-X de la classe de bootstrap. Je voulais 3 colonnes-XL écrans et 2 pour L, et 1 pour le reste. C'est le CSS que j'ai utilisé.

.section-card-col {
margin-bottom: 22px;
display: inline-block;
}
@media screen and (min-width: 1200px) {
.section-card-col {
width: calc(33% - 16px);
margin-left: 8px;
margin-right: 8px;
vertical-align: top;
}
}
@media screen and (min-width: 900px) and (max-width: 1199px) {
.section-card-col {
width: calc(50% - 16px);
margin-left: 8px;
margin-right: 8px;
vertical-align: top;
}
}

OriginalL'auteur Jose Ospina

-2

Cela va résoudre votre problème

<div class="col-xs-6 col-md-3">
<div class="well">
content goes here...
</div>
</div>

OriginalL'auteur Dushan

Vous devez vous connecter pour publier un commentaire.