如何在扩展md

Question

实际上，我正在制作一个网站，其中完整尺寸的设计需要一个.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查询来隐藏完整尺寸的代码，并在平板电脑尺寸上显示轮播？

Answer 1

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

这是在手机和平​​板电脑上响应式Bootstrap4轮播的结果，但是当屏幕宽度超过676px时，它不再是轮播。

[codepen] [1]

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

Answer 2

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

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

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

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