如何水平堆叠卡片以便以后查看传送带？

以下是我的目标：我想创建一个卡片传送带，在这里您可以点击左右箭头滚动浏览所有卡片。如何水平堆叠卡片以便以后查看传送带？

我这样做的首选方法：堆叠card-deck s并转换到下一个card-deck当按下箭头时。澄清：你一次只能看到一个card-deck，但我希望他们一边能够在它们之间进行转换。

现在我

<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 s为全宽（我使用自举4柔性选项，这样包装适用于这里）。现在，我怎么让他们100％宽，但水平堆叠，以便我可以稍后隐藏溢出和滚动甲板？

我已经尝试了各种各样的东西，我不知道如何去做这件事。这里有一个小提琴给你节省一些时间将其设置：

jsfiddle

此外，如果您知道了最新的阿尔法4引导的CDN启用弹性，让我知道。我使用的是几天。

来源

2016-05-13 Yorrd

使每个甲板上的旋转木马项目：HTTP： //www.codeply.com/go/WEbiqQvGhy – ZimSystem

@Skelly哇，完全忽略了这种可能性。作出正确的答案，我会立即接受。非常感谢！ – Yorrd

可以让每个card-deck旋转木马项目，并使用引导旋转木马（）组件..

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

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

Update using Bootstrap 4 alpha 6

来源

2016-05-17 17:13:03 ZimSystem

请注意，如果您使用的是引导程序的flex-box版本，则必须在'carousel-item'类中使用另一个'card-deck'包装器，而不是仅在一个div上使用它们。否则'card-deck' css将被覆盖（最显着的是'display：block'） – Yorrd

如何水平堆叠卡片以便以后查看传送带？

回答

相关问题