CSS Bootstrap 水平滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41962898/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap horizontal scrolling
提问by Halama
I use the following HTML code:
我使用以下 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>
So, I need to display one row with infinity columns by horizontal with scrolling in the bottom of page.
因此，我需要在页面底部通过水平滚动显示具有无穷大列的一行。
How can I do this?
我怎样才能做到这一点？
So, I tried to set fixed widthfor listcontainer and have set overflow-x: auto
所以，我试图width为list容器设置固定并设置overflow-x: auto
回答by Zim
It's okay to exceed 12 column units in a row. It causes the columns to wrap, but you can override the wrapping with flexbox.
这没关系连续超过12个单位。它会导致列 wrap，但您可以使用 flexbox 覆盖包装。
Bootstrap 4 includes flexbox, and the utility classes to get a horizontal scrolling layout..
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 Demo:http://www.codeply.com/go/GoFQqQAFhN
Bootstrap 4 演示：http : //www.codeply.com/go/GoFQqQAFhN
For Bootstrap 3, it could be done with some CSS for the flexbox.. .
对于 Bootstrap 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;
}
Bootstrap 3 Demo: http://www.codeply.com/go/P13J3LuBIM
Bootstrap 3 演示：http: //www.codeply.com/go/P13J3LuBIM
回答by BENARD Patrick
One other way :
另一种方式：
CSS:
CSS:
#list .row {white-space:nowrap;}
#list .row > div {display:inline-block;float:none;}
Js for horizontal scrolling:
用于水平滚动的 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
引导：https: //www.bootply.com/pbenard/usmX12rxgP
