Comment puis-je créer une tuile de mise en page dans le Bootstrap
Je suis en utilisant Bootstrap 3 pour mon site, où j'ai de nombreux postes. Droit maintenant, je suis en utilisant bootstrap colonnes et panneaux pour afficher les messages sur une page d'index.
Mais je veux montrer les mêmes postes dans un affichage en mosaïque comme une page Pinterest.
Est-il possible de le faire dans le bootstrap 3? Droit maintenant, ma mise en page ressemble à quelque chose comme
<div class="row product-list">
<?php getList(); ?>
</div>
où la fonction récupère la liste de ces postes.
et ils sont affichés dans un panneau comme celui-ci:
<a href="product-des.php?1">
<div class='col-xs-12 col-sm-4 col-md-3 col-lg-3'><div class='panel panel-warning'>
<div class='panel-heading'>Microsoft Lumia 575</div>
<div class='panel-body'>
<img class='product_listing_img img-responsive' src=files/uploaded_images/mobile-2.jpg></div>
</div>
</div>
</a>
Vue actuelle
Devrait afficher
- Merci de nous montrer la sortie courant et sortie attendue de capture d'écran.
- j'ai mis à jour mon post merci de vérifier
Vous devez vous connecter pour publier un commentaire.
Si vos articles sont de la même hauteur, alors vous pouvez utiliser le
col-md-*
des classes pour les tuiles enveloppé à l'intérieur d'unrow
. Chaque ligne aura des postes sur la base du nombre de messages que vous le souhaitez.Si les poteaux sont de hauteur variable alors je vous suggère d'utiliser un plugin comme
maçonnerie
Voir l'exemple ici pour la dynamique de la hauteur de la dalle : http://masonry.desandro.com/layout.html#imagesloaded
Un exemple de base à l'aide de CSS
Démo: http://jsfiddle.net/tQANc/590/
CSS:
HTML:
Vieille question, mais je suis tombé sur ce lors de la recherche pour le même problème, donc de poster une réponse pour les autres qui viennent à travers ce.
Ajouter Bootstrap v4 et utiliser les Cartes de la fonctionnalité, http://v4-alpha.getbootstrap.com/components/card/
Une remarque sur la rétro compatibilité, quand il vient à l'aide de la v4 et v3 pas, c'est beaucoup de mises en page quand j'ai été le tester. Afin d'utiliser les Cartes fonctionnalités sans avoir à retravailler beaucoup de votre mise en page, ajouter le fichier CSS de votre page de sorte que vous êtes en utilisant v3 et v4, les uns à côté des autres. Assurez-vous que la v4 est d'abord et v3 est la dernière sur la page, dans l'ordre, de sorte que la v3 est prioritaire lorsque le navigateur charge ces dans.
.card-columns
est ce que le travail soit fait.