Comment puis-je définir la hauteur pour les vignettes Twitter bootstrap?
J'ai du mal à configurer le module miniature pour mon site web personnel. J'utilise twitter bootstrap (3.0) pour mon projet et je ne peux pas terminer la configuration du module miniature.
La largeur est correcte, mais je ne peux pas définir la hauteur des vignettes (Je ne peux pas aligner toutes les vignettes sur la même hauteur).
Comment puis-je définir une hauteur (standard) pour toutes les vignettes et zoomer/mettre l'image au centre afin qu'ils puissent remplir tout l'espace sans étirer l'image?
<div class="row">
<!-- Thumbnail 0 -->
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img.png" alt="...">
</a>
<div class="caption">
<h4>Arctic MX-2, 8g</h4>
</div>
</div><!-- /thumbnail 0 -->
<!-- Thumbnail 1 -->
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="blue.png" alt="...">
</a>
<div class="caption">
<h4>Arctic MX-2, 8g</h4>
</div>
</div><!-- /thumbnail 1 -->
</div><!-- /thumbnail -->
3 réponses
Soit en css:
.thumbnail img { min-height:50px; height:50px; } // or whatever height you desire
Ou en ligne:
<img src="img.png" alt="..." style="min-height:50px;height:50px;" />
Hey, je regardais votre question, parce que j'ai eu le même problème dans Bootstrap où si l'une des hauteurs de <div> est plus élevée que l'autre, alors la grille ne s'affiche pas correctement. J'ai compris comment résoudre le problème d'alignement des vignettes,et je pense que beaucoup de gens pourraient utiliser la propriété CSS Flex.
Dans le div class="row" j'ai ajouté style="display:flex; flex-wrap: wrap;". Fondamentalement, mon code ressemble à ceci:
<div class="row" style="display:flex; flex-wrap: wrap;">
<div class="col-sm-3">
<div class="thumbnail">
<img src="http://lorempixel.com/500/300" style="width:200px">
<div class="caption">
<h4>Some thumbnail heading</h4>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<img src="http://lorempixel.com/500/300" style="width:200px">
<div class="caption">
<h4>Some thumbnail heading</h4>
</div>
</div>
</div>
.. any number of thumbnails you want
</div>
De sorte que vous pouvez avoir différentes hauteurs de vignettes et il s'affichera correctement, peut-être pas comme jQuery Maçonnerie, mais au moins mieux.
Avec SCSS, vous pouvez simplement:
@media (min-width: $screen-sm-min) {.thumbnail img { height:100px; }}
@media (min-width: $screen-md-min) {.thumbnail img { height:150px; }}
@media (min-width: $screen-lg-min) {.thumbnail img { height:200px; }}