如何修改移动和标签的bootstrap轮播

我正在使用一个bootstrap滑块。

• 在桌面上，它有三个幻灯片，每个幻灯片有4个磁贴

• 在标签上，它们必须是4张幻灯片，每张3张

• 在移动设备上，需要有12个不同的幻灯片

我正在考虑实现这一目标的最有效和最优化的方法。

选项1 – 创建3组不同的滑块。 一次只能看到一个

选项2 – 使用jquery检测屏幕宽度，并以编程方式将额外的图块添加为幻灯片，隐藏额外的图块。 我想这会非常复杂。

如果有更好的方法来实现这一点，请提供帮助。

Answer 1

这里是：

.carousel-inner .item.active { display: flex; } .carousel-inner .item { background-color: #212121; color: white; padding: 0 15px; } #desktopCarousel .carousel-inner .item > .row { min-height: 480px; } #tabletCarousel .carousel-inner .item > .row { min-height: 360px; } .carousel-inner .item > .row { flex-grow: 1; min-height: 320px; display: flex; flex-wrap: wrap; align-items: stretch; } .carousel-inner .item > .row [class^="col-"] { flex-grow: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: center; text-align: center; } .carousel-inner .item > .row .row { flex-grow: 1; display: flex; flex-wrap: wrap; align-items: stretch; } .carousel-inner .item > .row .row [class^="col-"] { display: flex; flex-direction: column; align-items: stretch; justify-content: center; } 

    
 
 
 
 
 
 
 
 
 
 First item 
 
 
 
 Second item 
 
 Third item 
 
 
 
 Fourth item 
 
 
 
 
 
 
 
 Fifth item 
 
 
 
 Sixth item 
 
 Seventh item 
 
 
 
 Eighth item 
 
 
 
 
 
 
 
 Nineth item 
 
 
 
 Tenth item 
 
 Eleventh item 
 
 
 
 Twelfth item 
 
 
 
 
 
   Previous    Next  
 
 
 
 
 
 
 
 
 
 
 
 First item 
 
 
 
 Second item 
 
 Third item 
 
 
 
 
 
 
 
 Fourth item 
 
 
 
 Fifth item 
 
 Sixth item 
 
 
 
 
 
 
 
 Seventh item 
 
 
 
 Eighth item 
 
 Nineth item 
 
 
 
 
 
 
 
 Tenth item 
 
 
 
 Eleventh item 
 
 Twelvth item 
 
 
 
 
 
   Previous    Next  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 First item 
 
 
 
 
 
 Second item 
 
 
 
 
 
 Third item 
 
 
 
 
 
 Fourth item 
 
 
 
 
 
 Fifth item 
 
 
 
 
 
 Sixth item 
 
 
 
 
 
 Seventh item 
 
 
 
 
 
 Eighth item 
 
 
 
 
 
 Nineth item 
 
 
 
 
 
 Tenth item 
 
 
 
 
 
 Eleventh item 
 
 
 
 
 
 Twelveth item 
 
 
 
   Previous    Next