horizontal scrollbaren Liste der Karten in Bootstrap

Ich versuche, eine horizontale Liste der Karten zu erstellen, in dem 3 Karten zu einem Zeitpunkt gezeigt werden und die anderen horizontal scrollable sind, wie folgt aus:horizontal scrollbaren Liste der Karten in Bootstrap

Dies kann mit CSS ganz einfach gemacht werden, aber ich möchte dies mit Bootstrap tun. Bootstrap 4 ships with cards sind durch das Materialdesign bekannt geworden und sie sind so einfach zu verwenden wie alles andere in Bootstrap. Für dieses Beispiel anstelle von Karten könnte es auch regulär div s sein.

Die Sache, mit der ich kämpfe, ist das Erstellen eines scrollbaren Containers von X-Karten (oder divs), von denen jeweils 3 gleichzeitig angezeigt werden und die anderen nach rechts überlaufen und scrollbar sind. Ich bin nicht sicher, wie man Bootstrap benutzt, geben Sie den Karten (oder divs) eine Breite, so dass 3 gleichzeitig gezeigt werden und die anderen rechts neben ihnen liegen.

Quelle

2016-03-14 Lukas

können Sie bootstrap-horizon

Installations

Fügen Bootstrap-horizon.css nach 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">

Fügen Sie die .row-horizon Klasse .rows verwenden, das horizontale Scrollen erfordern. Um den UX zu verbessern, überschreibt bootstrap-horizon die Klassen .col-*-* des Bootstrap, um die Basisbreite auf 90% anstatt auf 100% zu setzen, wodurch ein kleiner Teil der letzten Spalte angezeigt werden kann.

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

Beispiel

Quelle

2016-03-14 20:40:22

Danke! Ich akzeptiere deine Antwort noch nicht, weil ich einen Weg gefunden habe, es "nativ" in Bootstrap 4 zu machen, den ich später veröffentlichen werde. Liebe Googler, die sich darüber ärgern, dass ich meine Lösung nie gepostet habe: Die Idee ist es, ein Kartendeck in einen Hor zu stecken. scrollbaren Container und skalieren Sie das Carddeck, so dass die richtige Anzahl an Karten angezeigt wird. – Lukas

@Lukas Hallo! Ich habe das gleiche Problem wie Sie, können Sie bitte unsere native Lösung posten? Irgendein Code würde fantastisch sein, wenn Sie ihn noch haben –

@VivienAdnot die neuen flexbox Dienstprogramme nicht benutzen [erklärt in meiner Antwort] (http://stackoverflow.com/a/42117768/171456) – ZimSystem

Nun, da Bootstrap 4 Alpha 6 verwendet Flexbox, diese horizontale Scrollen Layout ist viel einfacher. Sie können einfach flex-row und flex-nowrap verwenden:

<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

-Update 2018 Bootstrap 4.0.0

Das obige Verfahren noch funktioniert, oder Sie können die Flexbox utils in dem Behälter von der Verwendung Karten: https://www.codeply.com/go/PF4APyGj7F

Quelle

2017-02-08 15:54:34 ZimSystem

die Codeply Verbindung zeigt nicht Ihr Beispiel ... Kannst du sowieso auf Bootstrap 4-Beta2 aktualisieren, wenn eine Änderung notwendig ist? – IlGala

Ich habe den Link aktualisiert. Sollte für Beta 2 gleich sein. – ZimSystem

horizontal scrollbaren Liste der Karten in Bootstrap

Antwort

Verwandte Themen