2013-03-20 74 views
3

我正在使用Bootstrap輪播來瀏覽頁面的子部分。雖然這適合我在大屏幕上完美,但在移動設備上,我寧願讓子部分一個接一個地顯示。這可能嗎?在手機上堆疊Bootstrap carousel物品?

因此,例如(澄清)

在桌面下的關於部分有一個旋轉木馬,通過任務,聯繫人,並與下一/上一個按鈕,客戶端列表循環。

在移動設備上,我希望這三個部分位於另一個之上,並且您只需滾動瀏覽它們;沒有下一個/上一個按鈕。

謝謝。

回答

5

我還是設法通過與媒體查詢傳送帶項目覆蓋白手起家默認樣式到底要做到這一點很容易:

@media (max-width: 767px) { 
    #myCarousel { 
     .item { 
      display:block; 
      padding-bottom:10px; 
     } 
    } 
} 

這需要旋轉木馬.item S,通常設置爲display:none除非.active和一個接一個地顯示它們,有一點填充。這不會禁用或暫停引導程序的傳送帶行爲,但如果您還隱藏了傳送帶指示符和任何傳送帶導航,則無法訪問該行爲。

也許不是最優雅的解決方案,但它的工作原理。

+0

正是我需要的,謝謝! – 2014-10-30 03:14:53

+0

我也喜歡在傳送帶標籤中加入'data-interval =「false」'來防止滑動。 – michaelmcgurk 2016-11-03 06:16:38