Comment envelopper (float) cartes dans le bootstrap 4

Je suis en utilisant bootstrap 4 beta.

J'ai une liste de cartes. Je veux qu'ils soient de largeur fixe, mais la hauteur est variable en fonction du contenu.

Le nombre de cartes peuvent être de 1 à n.

L'effet que je veux, c'est pour que les cartes soient disposés de gauche à droite jusqu'à ce que l'écran de l'espace imparti, puis les envelopper à la ligne suivante.

J'ai essayé toutes les différentes options cotées sur le bootstrap 4 exemple de page pour les cartes, mais ils ne semblent pas pour l'envelopper.

Comment puis-je y parvenir?

L'exemple ci-dessous montre les 3 à travers, avec beaucoup d'espace entre eux.

 <div class="card-columns">
<div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card"style="width: 18rem;">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Merci de partager votre code?

OriginalL'auteur Greg Gum | 2016-07-12

  1. 8

    Après avoir travaillé avec pendant un certain temps, le flottant solution je suis venu avec était pas satisfaisant, car dans certains cas, il y avait une grande quantité d'espace ci-dessous quelques cartes.. Après examen de bootstrap 4 cartes, j'ai trouvé une fonction qui fait exactement ce que je voulais: "carte-les colonnes"

    Il s'aligne vos cartes en trois colonnes, et re-organise une colonne lorsque la taille de l'écran est petit.

    Bootstrap Docs sur la carte-colonnes

    Merci s'accoupler. Vous m'avez sauvé une grande partie du temps.
    Le seul problème que j'ai trouvé avec la carte-colonnes est de l'ordre. Si vous disposez de 15 cartes en 3 colonnes de cartes en haut de la page sera quelque chose comme la Carte 1, Carte 6, et de la Carte 11. Pas de grands!
    Bootstrap 4.1 Lien: getbootstrap.com/docs/4.1/components/card/#card-columns

    OriginalL'auteur Greg Gum

  2. -1

    Ici la solution...
    utiliser bootstrap ligne et du col pour réaliser ceci, suivez ci-dessous le code.

    <div class="row">
<div class="col-lg-4 col-md-3 col-sm-6">
<div class="card">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
    J'ai essayé cela, et il les place dans une seule colonne horizontale.
    Supprimer la largeur de 'carte' div et de balisage de la ligne et du col

    OriginalL'auteur Srikanth Reddy

  3. -1

    Je suis venu avec un flottant de carte de classe qui fonctionne:

    <style>
.floating-card {
float: left;
margin: 5px;
max-width: 300px;
}
</style>

    Exemple d'utilisation:

        <div class="floating-card sortable">
<section class="box-typical task-card task">
<div class="task-card-photo">
<img src="img/img-task.jpg" alt="">
</div>
<div class="task-card-in">
<div class="btn-group task-card-menu">
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="font-icon-dots-vert-square"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#"><i class="font-icon font-icon-pencil"></i>Edit</a>
<a class="dropdown-item" href="#"><i class="font-icon font-icon-archive"></i>Archive</a>
<a class="dropdown-item" href="#"><i class="font-icon font-icon-trash"></i>Delete</a>
</div>
</div>
<div class="task-card-title">
<a href="#">Create new webpage for sales and marketing stuff</a>
<span class="task-card-title-label">(BIG)</span>
</div>
<div class="progress-compact-style">
<progress class="progress" value="25" max="100">
<div class="progress">
<span class="progress-bar" style="width: 25%;">25%</span>
</div>
</progress>
<div class="progress-compact-style-label">37% done</div>
</div>
<div class="task-card-tags">
<a href="#" class="label label-light-grey">Default</a>
<a href="#" class="label label-light-grey">Primary</a>
<a href="#" class="label label-light-grey">Success</a>
</div>
</div>
<div class="task-card-footer">
<div class="task-card-meta-item"><i class="font-icon font-icon-comments-2"></i>10</div>
<div class="task-card-meta-item"><i class="font-icon font-icon-clip"></i>24</div>
<div class="avatar-preview avatar-preview-32">
<a href="#">
<img src="img/photo-64-2.jpg" alt="">
</a>
</div>
</div>
</section><!--.task-card-->
</div>

    OriginalL'auteur Greg Gum