我使用以下 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
连续超过 12 个列单元是可以的。它会导致列换行,但您可以使用 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
另请参阅:对于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;
}
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);
})
<div class="row overflow-x-auto flex-nowrap">
<!-- your cols here -->
</div>