à Zurb Foundation 3+, ils ont une construction CSS d'une "grille de bloc" qui est une liste non ordonnée dans laquelle vous pouvez spécifier le nombre d'éléments d'affilée.
Il n'y a aucun moyen de voir pour le faire dans Bootstrap 3; Il n'y a que des colonnes. J'aimerais avoir la possibilité d'avoir un élément répété (tel qu'un LI) afficher facilement comme une grille réactive, où je peux spécifier le nombre de points d'arrêt, comme dans la fondation.
Je pense que je peux rouler le mien, mais je voulais voir si quelqu'un avait des suggestions ou qu'il avait déjà rencontré cela auparavant.
4 Réponses :
Je souhaite aussi que c'était la fonctionnalité dans BS3. Vous devrez créer votre propre solution.
Ma solution de contournement typique est tout comme la fondation, en utilisant des pourcentages pour définir la largeur, le sélecteur nième enfant et ajuster les marges. P>
[class*="block-grid-"] {
display: block;
padding: 0;
margin: 0 -0.55556rem;
}
[class*="block-grid-"] > li {
display: block;
height: auto;
float: left;
padding: 0 0.55556rem 1.11111rem;
}
.small-block-grid-3 > li {
width: 33.33333%;
list-style: none;
}
.small-block-grid-3 > li:nth-of-type(1n) {
clear: none;
}
.small-block-grid-3 > li:nth-of-type(3n+1) {
clear: both;
}
Utilisation de bootstrap 2.3.x. Le troisième élément était enveloppé à la ligne suivante. J'ai changé la largeur dans la grille de petit bloc-3> Li à 30% et le problème a été résolu.
Comment utilisez-vous cela?
Quel est le point de .small-block-grid-3> li: nième de type (1n) ? Cela sélectionne simplement chaque élément de liste, de sorte que le Effacer: aucun; doit être situé dans .small-block-grid-3> li
Fichier moins rapide et sale pour générer des grilles de blocs (1 à @ grille-colonnes code>) dans Bootstrap 3. Vous devez toujours effectuer des cours réactifs (comme bloc de bloc-grille-SM-3 -Grid-lg-6 code>). // Bootstrap variables and mixisn
@import "bootstrap/less/variables.less";
@import "bootstrap/less/mixins.less";
.block-grid () {
padding: 0;
& > li {
display: block;
float: left;
list-style: none;
}
}
.make-block-grid (@columns, @spacing: @grid-gutter-width) when (@columns > 0) {
.block-grid-@{columns} {
&:extend(.clearfix all);
.block-grid();
margin: 0 (-@spacing / 2);
> li {
width: 100% / @columns;
padding: 0 (@spacing / 2) @spacing;
&:nth-of-type(1n) { clear: none; }
&:nth-of-type(@{columns}n+1) { clear: both; }
}
}
.make-block-grid(@columns - 1)
}
.make-block-grid(@grid-columns);
Voici une version sensible à la réponse de Gremo:
.make-block-grid(@class, @columns: @grid-columns, @spacing: @grid-gutter-width) when (@columns > 0) {
.block-grid-@{class}-@{columns} {
.clearfix;
padding: 0;
margin: 0 (-@spacing / 2);
& > li {
display: block;
float: left;
width: 100% / @columns;
padding: 0 (@spacing / 2) @spacing;
list-style: none;
&:nth-of-type(1n) {
clear: none;
}
&:nth-of-type(@{columns}n+1) {
clear: both;
}
}
}
.make-block-grid(@class, @columns - 1);
}
.make-block-grid(xs);
@media (min-width: @screen-sm-min) {
.make-block-grid(sm);
}
@media (min-width: @screen-md-min) {
.make-block-grid(md);
}
@media (min-width: @screen-lg-min) {
.make-block-grid(lg);
}
Merci Stefan! C'est ce dont j'avais besoin.
Ce CSS fonctionne pour moi:
p>
<ul class="small-block-grid-2 large-block-grid-4"> <li><img src="../assets/img/examples/comet-th.jpg"></li> <li><img src="../assets/img/examples/launch-th.jpg"></li> <li><img src="../assets/img/examples/space-th.jpg"></li> <li><img src="../assets/img/examples/spacewalk-th.jpg"></li> </ul>
Je rencontre plusieurs fois ce problème exact avec Bootstrap / WordPress. Typiquement, je vais mettre en place une boucle de forach avec un comptoir pour mes litres. S'il est égal à 0, je ferai écho à une nouvelle ligne et lorsque le compteur est égal au nombre de colonnes que je souhaite dans la mise en page, je ferai écho à la fermeture de la balise pour la ligne et réinitialiser le compteur.