引导水平滚动

我用下面的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>

所以，我需要通过水平，在页面的底部滚动显示一行与无限列。

我该怎么做？

所以，我试图设置固定width为list容器，并且已经设置overflow-x: auto

来源

2017-01-31 Halama

引导仅支持12列，而不是无穷大（这将需要一个无限大的样式表）。你需要覆盖'col-md-3'设置的“宽度：25％”，这可能是固定的。 –

那么，什么是解决方案呢？ – Halama

不，引导程序处理列的方式是百分比，所以推断相同的方法会花费很多很多类。但是如果你不想这样做的话，为什么要使用bootstrap？还有其他的网格系统。 –

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

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

引导4演示：http://www.codeply.com/go/GoFQqQAFhN

自举3，它可以与一些CSS来实现为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; 
}

引导3演示：http://www.codeply.com/go/P13J3LuBIM

来源

2017-01-31 16:56:52 ZimSystem

另一种方式：

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);  
})

Bootply：https://www.bootply.com/pbenard/usmX12rxgP

来源

2017-01-31 18:34:41 pbenard

没有flexbox的好方法！ – ZimSystem

引导水平滚动

回答

相关问题