2

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

我的首选方法是：堆叠s 并在按下箭头时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-decks 都是全宽的（我在引导程序 4 中使用 flex 选项，因此此处适用包装）。现在，我如何让它们 100% 宽但水平堆叠，以便我以后可以隐藏溢出并滚动浏览甲板？

我已经尝试了各种各样的事情，我真的不知道该怎么做。这是一个小提琴，可以为您节省一些设置时间：

jsfiddle

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

4

1 回答 1

0

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

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

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

使用 Bootstrap 4 alpha 6 更新

于 2016-05-17T17:13:03.263 回答