Question

我有这样的网格：

在桌面/平板电脑（750px或更高）中：
在手机中（＆lt; 750px）：
但是当显示器小于750px时，我需要在旋转木马中转动网格：

我目前的代码：

<section>
    <h2 class="section-heading text-center">Lançamentos</h2>
    <hr class="primary">
    <div class="row nospace">
        <div class="col-sm-3">
            <div class="item">
                <img src="images/produto1.jpg" class="img-responsive">
                <h3>Produto</h3>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="item">
                <img src="images/produto2.jpg" class="img-responsive">
                <h3>Produto</h3>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="item">
                <img src="images/produto3.jpg" class="img-responsive">
                <h3>Produto</h3>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="item">
                <img src="images/produto4.jpg" class="img-responsive">
                <h3>Produto</h3>
            </div>
        </div>
    </div>
</section>

如何使用bootstrap执行此操作？

Answer 1

使用媒体查询隐藏您的div库并在使用媒体查询低于750px时显示引导轮播（http://getbootstrap.com/javascript/#carousel）：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

如果你无法弄清楚，请告诉我，我会帮助你完成它。

Answer 2

我认为这是你对https://jsfiddle.net/4khoydbe/3/

的影响

我使用了一个隐藏的carasual，并在770px使用媒体查询时，它变得可见。

#mobile{display: none}
@media (max-width: 770px){
   #mobile{display: inline} 
   .desktop{display: none} 
}

我更改为770px，因此页面不会中断，但是当您使用自己的图片时，可以将其设置为750px。

Answer 3

尝试了将近一个小时的插件。我使用以下方法解决了这个问题。

使用带有data-interval="false"的引导传送带来停止自动旋转。
使用媒体查询来dislpay: block上方的768px幻灯片

@media (min-width: 768px) {
  .mobileSlider .carousel-item {
    display: block;
    margin: 0;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div id="mobileCarousel" class="carousel slide mobileSlider" data-interval="false" data-ride="carousel">
  <ol class="carousel-indicators d-md-none">
    <li data-target="#mobileCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#mobileCarousel" data-slide-to="1"></li>
    <li data-target="#mobileCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="row">
      <div class="carousel-item active col-md-4">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item col-md-4">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item col-md-4">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/" class="d-block w-100" alt="...">
      </div>
    </div>
  </div>
  <a class="d-md-none carousel-control-prev" href="#mobileCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="d-md-none carousel-control-next" href="#mobileCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

当＆lt;旋转木马时，转动“响应网格” 750px

3 个答案: