引导水平滚动 [英] Bootstrap horizontal scrolling

问题描述

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

解决方案

它是列要包装，但是您可以使用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

I use the following HTML code:

<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 width for list container and have set overflow-x: auto

解决方案

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.

Bootstrap 4 includes flexbox, and the utility classes to get a horizontal scrolling layout..

<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

For Bootstrap 3, it could be done with some CSS for the 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

这篇关于引导水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！