我使用以下 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
最佳答案
是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
关于twitter-bootstrap - Bootstrap 水平滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41962898/