在我的桌面页面上,我当前的布局工作正常:

<div id="elementSlider" class="carousel slide" data-ride="carousel">   <div class="carousel-inner">     <div class="carousel-item active">       <div class="row">         <div class="col-12 col-md-3">           ...         </div>         <div class="col-12 col-md-3">           ...         </div>         <div class="col-12 col-md-3">           ...         </div>         <div class="col-12 col-md-3">           ...         </div>       </div>     </div>     <div class="carousel-item">       <div class="row">         <div class="col-12 col-md-3">           ...         </div>         <div class="col-12 col-md-3">           ...         </div>         <div class="col-12 col-md-3">           ...         </div>         <div class="col-12 col-md-3">           ...         </div>       </div>     </div>   </div> </div> 

现在,我希望能够在移动设备上单独滑动每个元素。 对于我要么需要创建一个第二轮播,因为答案同样的问题在这里提出,或以某种方式改变我的布局。 我宁愿更改布局,这样就不必每次都创建第二个轮播了。 现在,我的解决方案如下所示:

if ($(window).width() < 768) {   const moveItems = $('.carousel-inner').find('.col-12').each(function () {     let element = $(this)     $(this).closest('.carousel-inner').append(element)   })    $.when.apply(this, moveItems).done(function () {     $('.carousel-inner').find('.carousel-item').remove()     $('.carousel-inner').find('.col-12').each(function (i) {       if(i === 0) {         $(this).wrap('<div class="carousel-item active"><div class="row"></div></div>')       } else {         $(this).wrap('<div class="carousel-item"><div class="row"></div></div>')       }     })   }) } 

但这并不是真正可靠的工作。 有谁对此有更好的解决方案?

===============>>#1 票数:0

Bootstrap已经具有根据屏幕大小更改列数的类,例如col-12col-md-6col-lg-3 最自定义它的最简单方法是为此使用媒体查询 因此,例如:

@media only screen and (max-width: 768px) {   .carousel-inner {     // Your CSS   } } 

  ask by Brecherchef translate from so

===============>>#2 票数:0

显然,我的解决方案确实奏效了。 我有一个CSS属性,将carousel-item的内容设置为display: none; 我的解决方案可以在台式机和移动设备上正常工作:

jsfiddle

可能不是最干净的解决方案,但它现在可以使用。

  ask by Brecherchef translate from so

本文未有回复,本站智能推荐: