Bootstrap水平滚动

我使用以下HTML代码:

    

        
1
        
2
        
3
        
n-times
 
    

因此,我需要在页面底部按水平显示一行无限列.

我怎样才能做到这一点？

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

这没关系连续超过12个单位.它会导致列换行,但您可以使用flexbox覆盖换行.

Bootstrap 4包含flexbox,以及用于获取水平滚动布局的实用程序类.

    

        

           ..
        
        

           ..
        
        

           ..
        
        

           ..
        
        

           ..
        
        

           ..
        
        

           ..
        
        

           ..
        
    

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