twitter-bootstrap - 卡片中的多个轮播不工作 bootstrap v4

Question

我正在使用 cards of bootstrap v4 (alpha) ，我想在每张卡片中都有轮播，如下图所示。不幸的是，卡片 2 中的轮播似乎不起作用。

所有卡片都包裹在一个带有 class="card-columns" 的 div 中，我只想使用这个类，因为卡片样式适合我的要求。我对其他 Bootstrap 替代方案不感兴趣，例如 class="card-deck" 或 class="card-group"，它们不符合我的样式需求。

请找到JS fiddle链接到代码并找到下面的代码。

有人可以建议我如何在不影响卡片样式的情况下使轮播在多张卡片上工作。

这是来自 bootstap v4 css 的卡片的相关样式如果有帮助。

.card-columns {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
    -webkit-column-gap: 1.25rem;
       -moz-column-gap: 1.25rem;
            column-gap: 1.25rem;
  }
  .card-columns .card {
    display: inline-block;
    width: 100%;
  }

HTML代码如下:

<div class="container">

<div class="card-columns">

  <div class="card">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
          <img style="width=100%;" src="https://www.ricoh.com/r_dc/caplio/r7/img/sample_04.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
          <img style="width=100%;" src="http://2.bp.blogspot.com/-r1thEkTLZ8w/UUnTEQ0zINI/AAAAAAAAAJI/JbgDSvuhFSA/s1600/IMG_1211.JPG" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img style="width=100%;" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_(JPEG-HDR).jpg" alt="Third slide">
        </div>
      </div>
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="icon-prev" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="icon-next" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    <div class="card-block">
      <h4 class="card-title">Card 1</h4>
    </div>
  </div>


 <div class="card">
    <div id="carousel-example-generic1" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic1" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic1" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic1" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
          <img style="width=100%;" src="http://nikonrumors.com/wp-content/uploads/2014/03/Nikon-1-V3-sample-photo.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
          <img style="width=100%;" src="http://www.bestmanspeechestoasts.com/wp-content/themes/thesis/rotator/sample-4.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img style="width=100%;" src="https://blog.cloudflare.com/content/images/1.jpg.scaled500.jpg" alt="Third slide">
        </div>
      </div>
      <a class="left carousel-control" href="#carousel-example-generic1" role="button" data-slide="prev">
        <span class="icon-prev" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic1" role="button" data-slide="next">
        <span class="icon-next" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

    <div class="card-block">
      <h4 class="card-title">Card 2</h4>
    </div>
  </div>

</div>
</div>

Answer 1

这是浏览器错误! (感叹号是因为我为此工作了 2 小时，但运气不佳，然后可能打开了另一个浏览器。)

您的 Fiddle 在 OSX -> Safari 和 OSX -> Firefox 中工作，但在 OSX -> Chrome 中不工作。 (抱歉，没有尝试过 Windows 浏览器。)

可以通过将 Chrome 窗口的大小调整得更小来确认(以便它的手机宽度和卡片堆叠在彼此的顶部)- 然后轮播工作。