在移动设备中显示一个Bootstrap轮播项目

我有这个Bootstrap Carousel，它在Desktop视图中显示了2个项目。 但是，我想在Mobile视图中一次显示一个项目。 我怎样才能做到这一点？

https://jsfiddle.net/v9t2pz9b/

HTML

 
 
 
 
 block1 
 
 block2 
 
 
 
 block3 
 
 block4 
 
 
 
 block5 
 
 block6 
 
 
    Previous    Next  
  

JS：

 $(document).ready(function(){ $("#myCarousel").carousel(); }); 

像设计中所示的东西。 我想在移动设备中一次只显示一张幻灯片：

Answer 1

 $(document).ready(function(){ $("#myCarousel").carousel(); if ( $(window).width() < 640 ) { $('.col-sm-6').unwrap().addClass('item'); $('.col-sm-6:first').addClass('active'); } }); 

640是你的移动断点。 检查unwrap（） ，它会删除元素的父级，而不会影响其内容。