lista orizzontalmente scorrevole di carte in Bootstrap

Question

Sto cercando di creare un elenco orizzontale di carte dove 3 carte vengono mostrati in un momento e gli altri sono in orizzontale scorrevole, in questo modo:

Questo può essere fatto con CSS abbastanza facilmente, ma voglio farlo usando Bootstrap. Bootstrap 4 ships with cards come reso popolare dal design dei materiali e sono facili da usare come qualsiasi altra cosa in Bootstrap. Per questo esempio invece di carte potrebbe anche essere regolare div s.

La cosa con cui sto lottando è la creazione di un contenitore scorrevole di X carte (o div) in cui 3 di esse sono mostrate alla volta e le altre si riversano a destra e sono scorrevoli. Non sono sicuro di come usare Bootstrap dare alle carte (o div) una larghezza in modo che vengano mostrate 3 alla volta e le altre si trovano accanto a loro sulla destra.

Answer 1

È possibile utilizzare bootstrap-horizon

installazione

Includere bootstrap-horizon.css dopo 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"> 

aggiungere la classe .row-horizon-.rows che richiedono lo scorrimento orizzontale. Per migliorare UX, bootstrap-horizon sostituisce le classi .col-*-* del bootstrap per rendere l'ampiezza della baseline del 90% anziché del 100% che consente di visualizzare una piccola parte dell'ultima colonna.

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

Esempio

Answer 2

Ora che Bootstrap 4 Alpha 6 utilizza FlexBox, questa disposizione scorrimento orizzontale è molto più facile. Si può semplicemente utilizzare flex-row e 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

Aggiornamento 2018 Bootstrap 4.0.0

Il metodo di cui sopra funziona ancora, oppure è possibile utilizzare i utils Flexbox nel contenitore del carte: https://www.codeply.com/go/PF4APyGj7F