2013-03-20 80 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