Bootstrap horizontal scrollen

Ich benutze den folgenden HTML-code:

<div id="list">
    <div class="row">
        <div class="col-md-3">1</div>
        <div class="col-md-3">2</div>
        <div class="col-md-3">3</div>
        <div class="col-md-3">n-times</div> 
    </div>
</div>

So, ich brauche die Anzeige einer Zeile mit infinity-Spalten, indem Sie Sie horizontal scrollen, am Ende der Seite.

Wie kann ich dies tun?

So, ich habe versucht, Feste width für list container und haben overflow-x: auto

Bootstrap unterstützt nur 12 Spalten, nicht die Unendlichkeit (das erfordern würde, dass eine unendlich große stylesheet). Sie müssten überschreiben "width:25%", die col-md-3 setzt, um etwas fest wahrscheinlich.
Also, was ist die Lösung dann?
Nein, die Art und Weise, dass die bootstrap-Griffe Spalten mit Prozentzahlen, so zu extrapolieren, würde die gleiche Methode nehmen und eine Menge von Klassen. Aber wenn Sie nicht wollen, es zu tun die bootstrap Weg, warum bootstrap? Es gibt auch andere grid-Systeme.
Eigentlich Bootstrap nicht unterstützt mehr als 12 Einheiten Spalten in einer einzigen Zeile, und würde nicht verlangen, mehr CSS-Selektoren. Wieder native flexbox in der Bootstrap-4, so dass es die Bootstrap Weg. Du bist verwirrend 12 raster Einheiten mit erlaubten Spalten pro Zeile.
Diese Frage ist nicht ein dup von this. Diese Frage ist, wie man horizontal scrollen.

InformationsquelleAutor Halama | 2017-01-31

Es ist okay, mehr als 12 Spalte Einheiten in einer Zeile. Es bewirkt, dass die Spalten zu umbrechen, aber Sie können überschreiben die Verpackung mit flexbox.

Bootstrap-4 enthält flexbox, und die utility-Klassen, um eine horizontale Scroll-layout..

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

Bootstrap-4-Demo: http://www.codeply.com/go/GoFQqQAFhN

Für Bootstrap 3, es getan werden könnte, mit etwas CSS für die flexbox..
.

row > .col-xs-3 {
    display:flex;
    flex: 0 0 25%;
    max-width: 25%
}

.flex-nowrap {
    -webkit-flex-wrap: nowrap!important;
    -ms-flex-wrap: nowrap!important;
    flex-wrap: nowrap!important;
}
.flex-row {
    display:flex;
    -webkit-box-orient: horizontal!important;
    -webkit-box-direction: normal!important;
    -webkit-flex-direction: row!important;
    -ms-flex-direction: row!important;
    flex-direction: row!important;
}

Bootstrap 3 Demo: http://www.codeply.com/go/P13J3LuBIM

Gute Arbeit! Sie, mein Leben zu retten!!

InformationsquelleAutor Zim

Einen anderen Weg :

CSS:

#list .row {white-space:nowrap;}
#list .row > div {display:inline-block;float:none;}

Js für horizontale scrolling:

window.addEventListener('mousewheel', function(e){
    e.preventDefault();
    var step = -100;  
    if (e.wheelDelta < 0) {
      step *= -1;
    }
    var newPos = window.pageXOffset + step;
    $('body').scrollLeft(newPos);    
})