Grille souple de Places dans le Bootstrap

Je veux créer une grille d'images responsives qui sont toujours au carré dans le Bootstrap.

Jusqu'à présent j'ai obtenu ceci: Jsfiddle Lien

Cette partie des forces les éléments à carré de tous les temps:

.frontpage_square {
    position:relative;
    overflow:hidden;
    padding-bottom:100%;
}

.frontpage_square img {
    position:absolute;
}

Le grand carré sur la gauche et la période de neuf les plus petits sur la droite sont corrects, mais je ne peux pas comprendre comment je peux diffuser les neuf cases sur la droite sur toute la hauteur. Donc, fondamentalement, ils devraient prendre la totalité de la hauteur de la gauche, grand carré.

Je peux atteindre facilement en faisant quelques calculs. Mais pourquoi voudriez-vous tel un malpropre système de grille..?
Pourquoi est-il malpropre? Il est sth. comme "1 vedette de l'élément de plus grande taille et 9 normal éléments de plus petite taille dans une grille à côté d'elle". Rien de trop fou ici, ou je me trompe?
Rien de mal à cela.. Mais la sortie contient trop de rembourrage et aussi la façon dont vous avez réalisé un carré miniature padding:100% peut-être pas le meilleur.
Pour les futurs lecteurs à l'aide de Bootstrap 4, cette question peut être utile

OriginalL'auteur nucci | 2015-07-06

  1. 6

    C'est simple, vous n'êtes pas à l'organisation de votre divs correctement. Rendre l'utilisation de bootstrap en utilisant les divs correctement. Une fois que c'est fait, vous pouvez faire la colonne de la même taille à l'aide d' ce S. O. question.

    jsfiddle

    <div class="row">
<div class="col-sm-6 panel">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>    
</div>
<div class="col-sm-6 panel">
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4 ">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>  
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4 ">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>  
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#" class="thumbnail">
<div class="frontpage_square">
<img src="" class="img img-responsive full-width" />
</div>
</a>
</div>
</div>
    Bon, première chose que j'ai trouvé: utilisé une ancienne version de Bootstrap. Fixe et utilisé votre méthode. Mais après une bonne quantité de googler je ne sais toujours pas comment je peux lui donner le droit de bloc de 9 cases de la même hauteur que le grand carré de gauche. Comme dans votre jsfiddle, la dernière ligne de la 9 places se termine toujours quelques pixels de plus que la grande place. Donc, il semble qu'ils ont un padding-bottom je ne veux pas qu'ils ont...
    Cela a résolu un problème pour moi
    ne devrait-il pas être rangées toutes les 12 colonnes?
    pas nécessairement. tout dépend de vous et ce que vous voulez atteindre à la fin de la journée.
    thx. Comment voulez-vous faire cela que si vous voulez mettre du texte dans les cases (actuellement, il rend le 'carré' plus haut que large, mais si vous ajoutez du texte) - j'ai posé une question: stackoverflow.com/questions/40445364/...

    OriginalL'auteur Coding Enthusiast