Bootstrap中的卡水平滚动列表 [英] Horizontally scrollable list of cards in Bootstrap

问题描述

我正在尝试创建一张纸牌的水平列表，其中一次显示3张纸牌，其他纸牌可以水平滚动，如下所示:

I am trying to create a horizontal list of cards where 3 cards are shown at a time and the other ones are horizontally scrollable, like this:

使用CSS可以很容易地做到这一点，但是我想使用Bootstrap做到这一点. Bootstrap 4附带卡片，该卡片在材料设计上很普及，并且易于使用Bootstrap中的其他任何内容.对于此示例，代替卡也可以是常规div.

This can be done with CSS pretty easily, but I want to do this using Bootstrap. Bootstrap 4 ships with cards as popularized by material design and they are as easy to use as anything else in Bootstrap. For this example instead of cards it could also be regular divs.

我正在努力的事情是创建一个X卡(或div)的可滚动容器，其中一次显示3张卡，其余的则向右溢出并可以滚动.我不确定如何使用Bootstrap给卡片(或div)设置宽度，以便一次显示3张卡片，而其他卡片则位于右侧.

The thing I am struggling with is creating a scrollable container of X cards (or divs) where 3 of them are shown at a time and the others overflow to the right and are scrollable. I am not sure how to use Bootstrap give the cards (or divs) a width so that 3 are shown at a time and the other ones lie next to them on the right.

推荐答案

现在，Bootstrap 4 Alpha 6使用flexbox，这种水平滚动布局要容易得多.您可以简单地使用flex-row和flex-nowrap:

Now that Bootstrap 4 Alpha 6 uses flexbox, this horizontal scrolling layout is much easier. You can simply use flex-row and flex-nowrap:

<div class="container-fluid">
    <div class="row flex-row flex-nowrap">
        <div class="col-3">
            <div class="card card-block">Card</div>
        </div>
        <div class="col-3">
            <div class="card card-block">Card</div>
        </div>
        <div class="col-3">
            <div class="card card-block">Card</div>
        </div>
        <div class="col-3">
            <div class="card card-block">Card</div>
        </div>
        ...
    </div>
</div>

https://www.codeply.com/go/GoFQqQAFhN

更新2019 Bootstrap 4.3 +

上述方法仍然有效，或者您可以在卡片容器中使用flexbox实用程序: https://www.codeply.com/go/PF4APyGj7F

The above method still works, or you can use the flexbox utils in the container of the cards: https://www.codeply.com/go/PF4APyGj7F

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