时间戳

首页 > 解决方案 > 如何在移动设备上正确更改引导轮播的布局？

jquery - 如何在移动设备上正确更改引导轮播的布局？

问题描述

在我的 dektop 页面上，我当前的布局工作得很好：

<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>')
      }
    })
  })
}

但它并不能真正可靠地工作。有没有人对此有更好的解决方案？

标签： jqueryhtmltwitter-bootstrap

解决方案

Bootstrap已经有根据屏幕大小改变列数的类，比如col-12, col-md-6, col-lg-3。对其进行更多自定义的最简单方法是为此使用媒体查询。例如：

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

推荐阅读