实际上，我正在制作一个网站，其中全尺寸设计需要一个 .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 查询来隐藏全尺寸代码并在平板电脑尺寸上显示轮播？
最佳答案
谢谢杰西的回答。在用网格构建旋转木马很长时间后，我设法使用 jQuery 删除了旋转木马的类。
这是响应式 Bootstrap4 轮播在移动设备和平板电脑上的结果，但当屏幕宽度超过 676 像素时，它不再是轮播。
[代码笔][1]
[1]: https://codepen.io/gabonessi/pen/REyXoM
关于html - 如何在扩展 md 时在手机和平板电脑上制作消失的轮播，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54073303/