Bootstrap 3 carreaux carrés d'affichage
En utilisant Bootstrap 3, je veux avoir un carré de carrelage menu qui ressemble à Bootstrap de vignettes (http://getbootstrap.com/components/#thumbnails). Le code pour obtenir l'affichage en mosaïque est:
<div class="col-md-3 col-sm-4 col-xs-6">
<a href="#x" class="thumbnail">
<img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</a>
</div>
Je veux juste remplacer le img espace réservé comme (alignés verticalement) texte html. Donc, j'ai pensé que je peux juste faire ce qui suit:
<div class="col-md-3 col-sm-4 col-xs-6">
<a href="#x" class="thumbnail purple">Homepage</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<a href="#x" class="thumbnail purple">View Profile</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<a href="#x" class="thumbnail purple">Something 2 lines</a>
</div>
Et c'est ce que j'ai:
L'espace réservé exemples ont chaque tuile dynamiquement en forme pour rester comme des carreaux, et je veux le mien, en html/css/js, à être de cette façon. Est-il possible, ou dois-je avoir recours à une img?
Double Possible de stackoverflow.com/questions/19504755/...
J'ai peut-être tort, mais cela ne semble pas comme un doublon. le bootply exemple n'a pas de carré de tuiles.
La question est la même: "Comment créer sensible, carré .miniature divs"
J'ai peut-être tort, mais cela ne semble pas comme un doublon. le bootply exemple n'a pas de carré de tuiles.
La question est la même: "Comment créer sensible, carré .miniature divs"
OriginalL'auteur Alex | 2014-01-23
Vous devez vous connecter pour publier un commentaire.
Si vous voulez toujours rester en place, vous pouvez utiliser un
dummy
espace réservé avec 100% de la marge avant lathumbnail
, puis de la position absolue de l'thumbnail
...CSS:
http://bootply.com/108128
Cliquez sur le Bootply lien. Il a utilisé un haut-rembourrage de 36% pour déplacer le texte vers le milieu
Ou, je viens de mettre à jour de nouveau avec
padding-top:calc(50% - 30px);
qui semble être plus précise, mais peut-être pas de la croix-navigateur convivial.OriginalL'auteur