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小时没有运气，然后偶然打开另一个浏览器。）

您的小提琴适用于OSX - ＆gt; Safari和OSX中 - ＆gt; Firefox，但不在OSX中工作 - ＆gt;铬。（对不起，没试过Windows浏览器。）

可以通过调整Chrome窗口的大小来确定（这样它的移动电话宽度和卡片堆叠在一起） - 然后轮播工作。

卡片中的多个轮播无法使用bootstrap v4

1 个答案: