Bootstrap水平滚动

Question

我使用以下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

Answer 1

这没关系连续超过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 ://www.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;
}

Bootstrap 3演示:http://www.codeply.com/go/P13J3LuBIM