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

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

问题描述

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

这可以通过 CSS 轻松完成，但我想使用 Bootstrap 来完成.Bootstrap 4 随附卡片，因为 Material Design 很流行，它们与Bootstrap 中的其他任何内容.对于这个例子，它也可以是常规的 divs，而不是卡片.

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

解决方案

既然 Bootstrap 4 Alpha 6 使用了 flexbox，这种水平滚动布局就容易多了.你可以简单地使用 flex-row 和 flex-nowrap:

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

<div class="col-3"><div class="card card-block">Card</div>

<div class="col-3"><div class="card card-block">Card</div>

...

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

更新 2019 Bootstrap 4.3+

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

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:

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.

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.

解决方案

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

Update 2019 Bootstrap 4.3+

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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆