Bootstrap 水平滚动

horizontal

关注

发信

关注(28)粉丝(399)

Bootstrap 水平滚动

本文介绍了Bootstrap 水平滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用以下 HTML 代码:


<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次</div>

因此，我需要在页面底部滚动并水平显示具有无穷大列的一行.

我该怎么做?

所以，我尝试为 list 容器设置固定的 width 并设置了 overflow-x: auto

解决方案

可以连续超过 12 个列单位.它会导致列包装，但您可以使用 flexbox 覆盖包装.>

Bootstrap 4 使用 flexbox 和实用程序类来获得水平滚动布局..


<div class="row flex-row flex-nowrap"><div class="col-3">..
<div class="col-3">..

<div class="col-3">..

Bootstrap 4 演示: http://codeply.com/go/GoFQqQAFhN

另见:Bootstrap 中卡片的水平滚动列表

对于Bootstrap 3，它会用一些CSS 来完成flexbox...

row >.col-xs-3 {显示:弹性；弹性:0 0 25%；最大宽度:25%}.flex-nowrap {-webkit-flex-wrap: nowrap!important;-ms-flex-wrap: nowrap!important;flex-wrap: nowrap!important;}.flex-row {显示:弹性；-webkit-box-orient:水平！重要；-webkit-box-direction:正常！重要；-webkit-flex-direction:行！重要；-ms-flex-direction:行！重要；弹性方向:行！重要；}

Bootstrap 3 演示:http://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 uses 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://codeply.com/go/GoFQqQAFhN

Also see: Horizontally scrollable list of cards in Bootstrap

For Bootstrap 3, it would 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://codeply.com/go/P13J3LuBIM

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

09-02 12:24