如何在移动设备和平板电脑上制作扩展 md 时消失的轮播答案

【问题标题】：How to making a carousel on mobile and tablet that dissapears when extend md如何在移动设备和平板电脑上制作扩展 md 时消失的轮播
【发布时间】：2019-01-07 11:14:30
【问题描述】：

实际上，我正在制作一个网站，其中全尺寸设计需要一个 .row，每列内有 3 列，并带有 bootstrap4 卡。这很简单，但当它缩小到平板电脑和手机大小时，它应该是这 3 张图片的轮播。

这有可能吗？使用网格的事实使这个轮播有点混乱。

这就是我要编写的代码：

全尺寸：

手机：

这是我的全尺寸代码

<div class="row justify-content-center">
  <div class="col-md-4 d-flex justify-content-center">
    <div class="card card-radius" style="width: 18rem;">
      <img src="https://res.cloudinary.com/gnprojects/image/upload/v1546624022/cursos_1.jpg" class="card-img-top card-image-radius" alt="...">
      <div class="card-body">
        <h3 class="card-title">Panaderia Basica</h3>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#">Ver mas  <i class="fas fa-angle-right"></i></a>
      </div>
    </div>
  </div>
  <div class="col-md-4 d-flex justify-content-center">
    <div class="card card-radius" style="width: 18rem;">
      <img src="https://res.cloudinary.com/gnprojects/image/upload/v1546624022/cursos_1.jpg" class="card-img-top card-image-radius" alt="...">
      <div class="card-body">
        <h3 class="card-title">Panaderia Basica</h3>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#">Ver mas  <i class="fas fa-angle-right"></i></a>
      </div>
    </div>
  </div>
  <div class="col-md-4 d-flex justify-content-center">
    <div class="card card-radius" style="width: 18rem;">
      <img src="https://res.cloudinary.com/gnprojects/image/upload/v1546624022/cursos_1.jpg" class="card-img-top card-image-radius" alt="...">
      <div class="card-body">
        <h3 class="card-title">Panaderia Basica</h3>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#">Ver mas  <i class="fas fa-angle-right"></i></a>
      </div>
    </div>
  </div>
</div>

我希望它在达到平板电脑大小时会转换为轮播。我是否必须将相同的代码块编码到轮播标签中并使用@media 查询来隐藏全尺寸代码并在平板电脑尺寸上显示轮播？

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

感谢 Jasie 的回答。经过长时间使用网格构建轮播后，我设法使用 jQuery 删除了轮播的类。

这是移动设备和平板电脑上响应式 Bootstrap4 轮播的结果，但当屏幕宽度超过 676 像素时，它不再是轮播。

[codepen][1]

[1]: https://codepen.io/gabonessi/pen/REyXoM

【讨论】：

【解决方案2】：

这是引导轮播所需的代码：https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp

您需要不同的 html 代码，因为您需要 carousel 幻灯片类来激活 carousel。

如果您能够动态更改该类（例如通过 PHP），您可以使用相同的代码来解决它。根据给定的视口，您将添加轮播所需的引导类。轮播控件等也是如此。

在 PHP 中有不同的选项来检查视口大小，例如： * https://tutbakery.com/how-to-use-media-queries-in-php/ * https://gist.github.com/dcondrey/11342487

【讨论】：