如何水平堆叠卡片以便稍后查看轮播？

Question

目标如下：我想创建一个卡片轮播，您可以在其中单击左右箭头以滚动浏览所有卡片。

我的首选方法是：堆叠 card-deck 并在按下箭头时过渡到下一个 card-deck。澄清一下：你一次只能看到一个 card-deck，但我希望它们并排能够在它们之间 css 过渡。

现在我得到了

<row>
    <card-deck>
        <card/> x 3
    </card-deck>

    <card-deck>
        <card/> x 3
    </card-deck>

    <card-deck>
        <card/> x 3
    </card-deck>
</row>

这显然会垂直堆叠卡片组，因为所有 card-deck 都是全宽的（我在 bootstrap 4 中使用了 flex 选项，因此此处应用换行）。现在，我如何让它们 100% 宽但水平堆叠，以便我以后可以隐藏溢出并滚动浏览甲板？

我试过各种各样的东西，我真的不知道该怎么做。这里有一个 fiddle 可以为您节省一些设置时间：

jsfiddle

此外，如果您知道启用了 flex 的最新 alpha 4 bootstrap CDN，请告诉我。我用的是几天前的。

Answer 1

您可以使每个 card-deck 成为轮播项目并使用 Bootstrap 的 carousel() 组件..

<div class="carousel-inner">
       <div class="card-deck carousel-item">
             <div class="card">
                    ...

工作示例：http://codeply.com/go/WEbiqQvGhy

Update using Bootstrap 4 alpha 6

如何水平堆叠卡片以便稍后查看轮播？

How to stack cards horizontally for later viewing of carousel?

twitter-bootstrap

css

flexbox

twitter-bootstrap-4