8
votes

Twitter Bootstrap Thumbnails réactifs: Comment guérir l'indentation sur la deuxième rangée?

J'ai l'exemple suivant: http://jsfiddle.net/q5dxc/show/

Une idée de la façon dont je peux guérir l'indentation après la 4ème vignette?

Voici la source: http://jsfiddle.net/q5dxc/

En regardant le Documentation sous la rubrique "Plus d'exemples", je peux voir son exemple de 2 lignes Mais je ne peux pas faire fonctionner ça.

Des idées? Merci d'avance.

twitter-bootstrap

0 commentaires

4 Réponses :

3
votes

Ils ne l'expliquent pas vraiment bien dans la démo, mais si vous utilisez le

  autour de celui-ci, vous devez faire une autre ligne de la prochaine ligne de vignettes . Si vous voulez simplement faire un tas de miniatures qui ne sont pas  fluide  vous pouvez simplement utiliser un     ou   . Cela devrait être soulevé comme un problème contre les bootstrap afin qu'il puisse être fixé.                                 


                                                                    
                                    
                                    
                                        0 commentaires


                        
                                            
                            
                                
                                    7
 votes
                                
                            
                            
                                
                                     J'ai trouvé le même problème et j'ai trouvé une solution élégante. J'utilise ce petit hack:  xxx  
 Notez que la longue série de  Li  est la solution IE et vous devez en ajouter l'un pour chaque ligne. < / p>                                 


                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            

                        

                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Ceci est un problème rapporté sur le bootstrap officiel Github, alors je suggère à quiconque la recherche de plus de solutions pour vérifier cela -  twitter bootstrap sur github.com . 

 À compter de ce moment, la question n'a pas été résolue, mais divers utilisateurs ont soumis plus de 10 solutions différentes dans le fil de commentaire là-bas.                                 

                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     the  La documentation des miniatures  ne faisait pas allusion à une conception réactive, mais un prédéfini  rangée  code> avec  .span *  code> enfants: 
 
... Le composant Thumbnails utilise des classes système de grille existantes - comme .Span2 ou .span3 - pour le contrôle des dimensions de la vignette.
 code>  p> 
 avoir chldren de  .span2  code>,  .span3  code>,  .span4  code> ou  .span6  Code> Le suivant  patch  fonctionne avec les navigateurs modernes et Twitter BOOTSTRAP 2.3.2:  P> 
.row-fluid .thumbnails .span2:nth-child(6n+1), 
    .row-fluid .thumbnails .span3:nth-child(4n+1), 
    .row-fluid .thumbnails .span4:nth-child(3n+1), 
    .row-fluid .thumbnails .span6:nth-child(2n+1) {
        margin-left: 0;
}

                                

                                                                    
                                    
                                    
                                        0 commentaires