在小型设备中将一行图像转换为轮播

Question

我正在尝试转换这行图像...

将其转换成小型轮播以在小型设备中可视化（响应式设计）我正在使用 bootstrap，该图像的代码在这里：

<div class="row d-flex justify-content-center pb-5" style="background-image: url('assets/img/Vector_Chain1.png'); margin-left:0px; margin-right:0px;">
                    <img src="assets/img/TheEye.png" class="img-fluid col-md-3 col-sm-8 mt-5 img-section2" alt="">
                    <img src="assets/img/ThePyramid.png" class="img-fluid col-md-3 col-sm-8 mt-5 img-section2" alt="">
                    <img src="assets/img/TheEthernal.png" class="img-fluid col-md-3 col-sm-8 mt-5 img-section2" alt="">
                </div>

我想要当设备像 phone 一样小的时候，这个 div 将自己转换成旋转木马以获得更好的可视化效果

Answer 1

将类 d-block 和 d-md-flex 添加到您的容器中
为移动设备上的轮播功能创建一个新容器。

最终html代码：

<div class="row d-none d-md-flex justify-content-center pb-5" style="background-image: url('assets/img/Vector_Chain1.png'); margin-left:0px; margin-right:0px;">
  <img src="assets/img/TheEye.png" class="img-fluid col-md-3 col-sm-8 mt-5 img-section2" alt="">
  <img src="assets/img/ThePyramid.png" class="img-fluid col-md-3 col-sm-8 mt-5 img-section2" alt="">
  <img src="assets/img/TheEthernal.png" class="img-fluid col-md-3 col-sm-8 mt-5 img-section2" alt="">
</div>

<div id="carouselExampleSlidesOnly" class="carousel slide d-block d-md-none" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="assets/img/TheEye.png" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="assets/img/ThePyramid.png" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="assets/img/ThePyramid.png" alt="Third slide">
    </div>
  </div>
</div>

在小型设备中将一行图像转换为轮播

Convert a row of images into a carousel in small devices

html

css

carousel

twitter-bootstrap

bootstrap-4