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

Question

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

所有卡片都用class="card-columns" 包裹在一个div 中，我只想使用这个类，因为卡片样式适合我的要求。我对不符合我的造型需求的其他引导替代品不感兴趣，例如 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 窗口的大小来确认（这样它的手机宽度和卡片堆叠在一起）——然后轮播就可以工作了。