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都是全宽（我在引导程序4中使用flex选项，所以包装适用于此处）。现在，我如何让它们100％宽但是水平堆叠，这样我以后可以隐藏溢出并滚动到甲板上？

我尝试过各种各样的事情，但我真的不知道如何去做。这可以帮助您节省一些时间来设置它：

jsfiddle

另外，如果您知道启用了flex的最新alpha 4引导程序CDN，请告诉我。我使用的那个是几天之久。

Answer 1

您可以将每个card-deck设为轮播项并使用Bootstrap的轮播（）组件..

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

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

Update using Bootstrap 4 alpha 6

如何水平堆叠卡片以便以后查看旋转木马？

1 个答案: