引导水平滚动答案

【问题标题】：Bootstrap horizontal scrolling引导水平滚动
【发布时间】：2017-06-17 04:53:08
【问题描述】：

我使用以下 HTML 代码：

<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>

所以，我需要在页面底部滚动显示一行无限列。

我该怎么做？

所以，我尝试为list 容器设置固定的width 并设置了overflow-x: auto

【问题讨论】：

Bootstrap 仅支持 12 列，而不是无限列（这需要无限大的样式表）。您需要将col-md-3 设置的“宽度：25%”覆盖为可能已修复的内容。
那么，解决方案是什么呢？
不，引导程序处理列的方式是使用百分比，因此推断相同的方法需要大量的类。但是，如果您不想以引导方式进行操作，为什么要使用引导程序呢？还有其他网格系统。
实际上 Bootstrap 确实在单行中支持超过 12 个列单元，并且不需要更多的 CSS 选择器。同样是 Bootstrap 4 中的原生 flexbox，所以它是 Bootstrap 方式。您将 12 个网格单元与每行允许的列混淆了。
这个问题不是this的重复。这个问题是如何创建水平滚动。

标签： twitter-bootstrap css twitter-bootstrap-3 scroll

【解决方案1】：

它是okay to exceed 12 column units in a row。它会导致columns to wrap，但您可以使用 flexbox 覆盖包装。

Bootstrap 4 使用 flexbox 和实用程序类来获得水平滚动布局..

<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 演示： http://codeply.com/go/GoFQqQAFhN

另见：Horizontally scrollable list of cards in Bootstrap

对于 Bootstrap 3，它会使用一些用于 flexbox 的 CSS 来完成。 .

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 演示：http://codeply.com/go/P13J3LuBIM

【讨论】：

【解决方案2】：

另一种方式：

CSS：

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

水平滚动的Js：

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

引导层：https://www.bootply.com/pbenard/usmX12rxgP

【讨论】：