如何水平堆疊卡片以便以後查看傳送帶？

以下是我的目標：我想創建一個卡片傳送帶，在這裏您可以點擊左右箭頭滾動瀏覽所有卡片。如何水平堆疊卡片以便以後查看傳送帶？

我這樣做的首選方法：堆疊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

如何水平堆疊卡片以便以後查看傳送帶？

回答

相關問題