在移动视图中将元素合并到轮播中？

问题描述

Here是我希望将它们组合成可滑动旋转木马的元素。有没有办法做到这一点？我只希望它们仅在移动视图中变成轮播。

如果需要，这里是HTML。感谢您的帮助。

<div class="col-md-5 col-xs-12 d-flex justify-content-center little">
    <div class="col launch">
      <div class="row-sm-3 row-md-4 fx">
        <div class="row d-flex justify-content-center resim"><img src="css/img/Icon1.png" alt=""></div>
        <div class="row d-flex justify-content-center baslik">First 7 Days Free</div>
        <div class="row d-flex justify-content-center yazi">Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut.</div>
      
      </div>
      <div class="row-sm-3 row-md-4 fx">
        <div class="row d-flex justify-content-center resim"><img src="css/img/Icon2.png" alt=""></div>
        <div class="row d-flex justify-content-center baslik">Fully Support</div>
        <div class="row d-flex justify-content-center yazi">Lorem ipsum dolor sit amet,sed do eiusmod tempor incididunt ut.</div>
        
      </div>
  </div>
  <div class="col star">
      <div class="row-sm-3 row-md-4 fx">
        <div class="row d-flex justify-content-center resim"><img src="css/img/Icon3.png" alt=""></div>
        <div class="row d-flex justify-content-center baslik">Modern Flat Design</div>
        <div class="row d-flex justify-content-center yazi">Lorem ipsum dolor sit amet,sed do eiusmod tempor incididunt ut.</div>
      </div>
      <div class="row-sm-3 row-md-4 fx" >
        <div class="row d-flex justify-content-center resim" ><img src="css/img/Icon4.png" alt="" id="ozel"></div>
        <div class="row d-flex justify-content-center baslik">User Friendly</div>
        <div class="row d-flex justify-content-center yazi">Lorem ipsum dolor sit amet,sed do eiusmod tempor incididunt ut.</div>
      </div>
  </div>


  </div>

解决方法

我想唯一的机会是同时为您的网格状显示（如上所示）和轮播提供代码：

<!-- Code of your grid view -->
<div id="gridView">
  <div class="col-md-5 col-xs-12 d-flex justify-content-center little">
    ...
  </div>
</div>
<!-- Code of your carousel -->
<div id="carouselExampleControls" class="carousel slide mx-3 my-2" data-ride="carousel">
  ...
</div>

接下来使用Bootstrap display property正确显示和隐藏容器，例如d-md-none隐藏在md和更宽的屏幕上，d-none d-md-block隐藏在小于md的屏幕上：

<!-- Code of your grid view -->
<div id="gridView" class="d-none d-md-block">
  <div class="col-md-5 col-xs-12 d-flex justify-content-center little">
    ...
  </div>
</div>
<!-- Code of your carousel -->
<div id="carouselExampleControls" class="carousel slide mx-3 my-2 d-md-none" data-ride="carousel">
  ...
</div>

由于您使用的是d-flex，因此我将多余的<div id="gridView">放在了它周围。

这里是example of a Bootstrap carousel with captions：

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Nulla vitae elit libero,a pharetra augue mollis interdum.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Praesent commodo cursus magna,vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

您可以轻松地在此处集成您的容器，并将其与上述方法结合起来。

祝你好运！

bootstrap-4 carousel html slider