Liste de cartes à défilement horizontal dans Bootstrap

Question

J'essaie de créer une liste horizontale de cartes où 3 cartes sont affichées à la fois et les autres peuvent défiler horizontalement, comme ceci:

Cela peut être fait avec CSS assez facilement, mais je veux le faire en utilisant Bootstrap. Bootstrap 4 est livré avec des cartes aussi popularisé par la conception matérielle et ils sont aussi faciles à utiliser que n'importe quoi d'autre dans Bootstrap. Pour cet exemple, au lieu de cartes, il peut également s'agir de divs ordinaires.

La chose avec laquelle je me bats est de créer un conteneur déroulant de X cartes (ou divs) où 3 d'entre elles sont affichées à la fois et les autres débordent vers la droite et peuvent défiler. Je ne sais pas comment utiliser Bootstrap donnez aux cartes (ou divs) une largeur pour que 3 soient affichées à la fois et les autres se trouvent à côté d'elles à droite.

Answer 1

Maintenant que Bootstrap 4 Alpha 6 utilise flexbox, cette disposition de défilement horizontal est beaucoup plus facile. Vous pouvez simplement utiliser flex-row et flex-nowrap:

<div class="container-fluid">
    <div class="row flex-row flex-nowrap">
        <div class="col-3">
            <div class="card card-block">Card</div>
        </div>
        <div class="col-3">
            <div class="card card-block">Card</div>
        </div>
        <div class="col-3">
            <div class="card card-block">Card</div>
        </div>
        <div class="col-3">
            <div class="card card-block">Card</div>
        </div>
        ...
    </div>
</div>

https://www.codeply.com/go/GoFQqQAFhN

Mise à jour 2018 Bootstrap 4.0.0

La méthode ci-dessus fonctionne toujours, ou vous pouvez utiliser les utilitaires flexbox dans le conteneur des cartes: https://www.codeply.com/go/PF4APyGj7F

Answer 2

Vous pouvez utiliser bootstrap-horizon

Installation

Inclure bootstrap-horizon.css après bootstrap.css

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/bower_components/bootstrap-horizon/bootstrap-horizon.css">

Ajoutez la classe .row-horizon À .rows Qui nécessite un défilement horizontal. Afin d'améliorer l'UX, bootstrap-horizon remplace les classes .col-*-* De bootstrap pour rendre la largeur de la ligne de base à 90% au lieu de 100%, ce qui permet d'afficher une petite partie de la dernière colonne.

<div class="row row-horizon">
  <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
    ...
  </div>
</div>

Exemple