Bootstrap 中可水平滚动的卡片列表 | Flexbox

Flexbox

广东省文旅厅发布预警提示谨慎进行户外旅游活动

从GUI连接到Meteor Mongo

观察其他子控制器？

如何从字符串设置 imageView 的图像?

File.Exists返回False在Active Directory环境

eclipse xml错误

黑莓手机 - TreeField与CheckBoxField字段？

在rails 3.1中从html调用javascript函数

获取所有股票符号股市 - 明智

如何在Docker中正确安装RVM?

C#. MSMQ.单个消息的最大大小

如何查看Visual Studio Express中的异常详细信息？

从Url获取图像无法解码流：fileNotFoundException

强制Visual Studio在开始调试时进行重建

如何关闭Entity Framework 6.1日志记录？

Bootstrap 中可水平滚动的卡片列表

扫码查看

本文介绍了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 中可水平滚动的卡片列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-25 22:32