在移动设备上堆叠Bootstrap轮播项目?

时间:2013-03-20 21:37:10

标签: twitter-bootstrap carousel

我正在使用Bootstrap轮播来循环浏览页面的子部分。虽然这完全适合我在大屏幕上,但在移动设备上我更喜欢让子部分一个接一个地显示。这可能吗?

所以,例如(澄清)

在“关于”部分下的桌面上,有一个轮播,循环显示Mission,Contact和Client List以及next / prev按钮。

在移动设备上我希望这三个部分一个在另一个之上,你只需正常滚动它们;没有下一个/上一个按钮。

感谢。

1 个答案:

答案 0 :(得分:5)

我最终通过使用媒体查询覆盖carousel项目上的bootstraps默认样式,设法很容易做到这一点:

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

这需要轮播.item s,通常设置为display:none,除非.active并使用一点填充一个接一个地显示它们。这不会禁用或暂停bootstrap的轮播行为,但如果您还隐藏轮播指示器和任何轮播导航,则无法访问该行为。

也许不是最优雅的解决方案,但它确实有效。