Défilement horizontal liste des cartes dans le Bootstrap

Je suis en train de créer une liste horizontale de cartes 3 cartes à la fois et les autres sont en défilement horizontal, comme ceci:

Défilement horizontal liste des cartes dans le Bootstrap

Cela peut être fait avec CSS assez facilement, mais je veux le faire en utilisant Bootstrap. Bootstrap 4 est fourni avec des cartes popularisées par la conception de matériaux et ils sont aussi faciles à utiliser que toute autre chose dans le Bootstrap. Pour cet exemple, au lieu de cartes, il pourrait également être régulière divs.

La chose que je suis aux prises avec la création d'une zone déroulante contenant de X cartes (ou les divs) où 3 d'entre eux sont présentés à la fois et les autres débordement à droite et sont défilement. Je ne suis pas sûr de la façon d'utiliser Bootstrap donner les cartes (ou les divs) d'une largeur de sorte que 3 à la fois et les autres mensonge à côté d'eux sur la droite.

OriginalL'auteur Lukas | 2016-03-14

  1. 9

    Maintenant que Bootstrap 4 Alpha 6 utilise flexbox, ce défilement horizontal de la mise en page 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 la flexbox utils dans le conteneur des cartes: https://www.codeply.com/go/PF4APyGj7F

    le codeply lien n'est pas votre exemple... Pouvez-vous quand même de mise à jour pour l'amorçage de 4-beta2 si un changement est nécessaire?
    J'ai mis à jour le lien. Doit être le même pour la bêta 2.
    Il serait plus utile de montrer le code mis à jour pour le deuxième exemple ici, plutôt que d'avoir à cliquer sur le lien.

    OriginalL'auteur Zim

  2. 1

    Vous pouvez utiliser bootstrap-horizon

    Installation

    Inclure bootstrap de l'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">

    Ajouter le .row-horizon classe de .rows qui nécessitent de défilement horizontal. Afin d'améliorer l'expérience utilisateur, bootstrap-horizon remplace bootstrap est .col-*-* classes pour faire de la ligne de base largeur de 90% au lieu de 100%, ce qui permet pour une petite partie de la dernière colonne à afficher.

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

    Exemple

    Défilement horizontal liste des cartes dans le Bootstrap

    Merci! Je ne suis pas d'accepter votre réponse pour l'instant parce que j'ai trouvé un moyen de le faire "nativement" dans le Bootstrap 4 que je poste plus tard. Chers googlers qui sont ennuyé que je n'ai jamais posté ma solution: L'idée c'est de mettre un jeu de cartes dans un hor. défilement de conteneur et de l'échelle des cartes, de sorte que le bon nombre de cartes sera montré.
    Bonjour ! J'ai le même problème que vous, vous pouvez publier nos native solution, s'il vous plaît ? Un peu de code serait génial si vous l'avez encore
    l'utilisation de la nouvelle flexbox utilitaires comme expliqué dans ma réponse

    OriginalL'auteur Mohamed Zezo