web-dev-qa-db-fra.com

Irrégulier bootstrap habillage de colonne

Exécuter Rails 4.1.4 avec les dernières versions de haml, haml-Rails, sass et bootstrap-sass. Pour un affichage utilisateur, mon HAML est comme tel:

.tutors-listing
    .row
      - @users.each do |tutor|
        .col-xs-12.col-md-3
          .row.tutor
            .col-xs-offset-1.col-xs-4.col-md-12
              = image_tag tutor.photo, :class => 'img-responsive img-circle tutor-photo'
              %h4.tutor-name
                = tutor.first_name

             %p
                teaches
             %strong.tutor-skills
               = tutor.teachables

Cependant, ce balisage entraîne le problème suivant: Irregular column wrappingMore irregular column wrapping

J'espère que quelqu'un pourra deviner ce qui ne va pas ici. Au point d'arrêt moyen, il devrait y avoir 4 colonnes uniformément.

htmlcssruby-on-railstwitter-bootstraptwitter-bootstrap-3
51
Benoît

Cela est dû à des compétences avec 2 lignes de texte ou plus. C'est un bogue bien connu lors de l'utilisation de la propriété float. Voici une petite image à comprendre:

enter image description here

[Bootply] Le problème

Option # 1: forcer la hauteur

Votre première option consiste à forcer les éléments à avoir la même hauteur:

.tutor {
    height: 500px;
}
  • [Pro] Simple et fonctionne partout
  • [Con] Utilisez un nombre magique
  • [Con] Limitez le nombre de lignes de compétences
  • [Con] Espaces inutiles sur la version modile

[Bootply] Force height

Option n ° 2: utilisez un clearfix

Votre deuxième option est d'utiliser un clearfix et de forcer le 5ème élément à être sur une nouvelle ligne (idem pour le 9ème, le 13ème ...):

.tutors-listing > .row > .col-md-3:nth-child(4n+1) {
    clear: both;
}
  • [Pro] Ne limite pas le nombre de lignes de compétences
  • [Pro] Pas d'espaces inutiles
  • [Pro] Pas de nombre magique
  • [Con] Une règle CSS par taille (xs/sm/md/lg)
  • [Con] La règle dépend de votre grille (.col-xx-3)

[Bootply] Clearfix

118
zessx

Dans mon cas, je voulais afficher 3 éléments par ligne sur de grands écrans, 2 sur des écrans moyens et 1 sur des écrans plus petits.

Vous pouvez également décommenter les couleurs d'arrière-plan pour vérifier le moment où l'effet se déclenche.

http://www.bootply.com/QOor73wFAY#

/* fixes for columns wrapping in odd ways due to variable height */
/* when showing 2 items per row, clear #1, 3, 5 */
@media (min-width: $screen-sm-min){
    .cell-box:nth-child(2n+1){
        clear: both;
        /* background-color: rgba(0, 0, 255, .5); /* blue */
    }
}
/* when showing 3 items per row, clear #1, 4, 7 */
@media (min-width: $screen-md-min){
    .cell-box:nth-child(2n+1){
        clear: none;
    }
    .cell-box:nth-child(3n+1){
        clear: both;
        /* background-color: rgba(0, 255, 0, .5); /* green */
    }
}
13
CocaLeaf

De par son apparence, vous affichez toutes les colonnes sur une seule ligne. Vous devez le changer pour qu'il commence une nouvelle ligne toutes les 4 colonnes, c'est-à-dire (en simple erb)

  <% @users.each_slice(4).to_a.each do |chunk| %>
     <div class="row">
       <% chunk.each do |tutors| %>
         <div class="col-sm-3">
           ...
         </div>
       <% end %>
    </div>
  <% end %>

Vous pourriez ne pas avoir besoin du to_a sur la première boucle

1
ob264

Parfois, je rencontre également ce problème. Je recommande d'essayer d'écraser tout remplissage ou marge dont vous n'avez PAS besoin. Essayez de changer la marge à 0 en premier. Retirez ensuite une partie du rembourrage. Cela a aidé dans certains de mes cas.

1
Zackery Gianotti