Bootstrap 4 Carousel 列而不是 carousel-item

Question

Bootstrap 是否支持在 Carousel 而不是 carousel-item -s 中显示网格列或行？这个想法是有一个复杂的网格列结构，它们可以像轮播项目一样相互交换。例如，如果我们有以下网格：

<div class="container">
  <div class="row" id="row1">
    <div class="col col-6-sm">
      <!-- further hierarchy -->
    </div>
    <div class="col col-6-sm">
      <!-- further hierarchy -->
    </div>
  </div>
  <div class="row" id="row2">
    <div class="col col-6-sm">
      <!-- further hierarchy -->
    </div>
    <div class="col col-6-sm">
      <!-- further hierarchy -->
    </div>
  </div>
  <div class="row" id="row3">
    <div class="col col-6-sm">
      <!-- further hierarchy -->
    </div>
    <div class="col col-6-sm">
      <!-- further hierarchy -->
    </div>
  </div>
</div>

我希望能够将 row1、row2 和 row3 div 表示为轮播项目。 或者如果 carousel-item 支持在其容器中嵌套网格元素，我可以简单地将网格层次结构包装在 carousel-item 中？

Answer 1

Bootstrap 4 轮播仍然需要 carousel-item 类才能工作，但可以对其进行调整以与网格列一起工作。只需在每个 carousel-item... 中包含 row>col...

https://www.codeply.com/go/ojz5BDpOej

     <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item py-5 active">
                    <div class="row">
                        <div class="col-sm-6">slide 1</div>
                        <div class="col-sm-6">slide 2</div>
                    </div>
                </div>
                <div class="carousel-item py-5">
                    <div class="row">
                        <div class="col-sm-6">slide 3</div>
                        <div class="col-sm-6">slide 4</div>
                    </div>
                </div>
                <div class="carousel-item py-5">
                    <div class="row">
                        <div class="col-sm-6">slide 5</div>
                        <div class="col-sm-6">slide 6</div>
                    </div>
                </div>
                <div class="carousel-item py-5">
                    <div class="row">
                        <div class="col-sm-6">slide 7</div>
                        <div class="col-sm-6">slide 8</div>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
    </div>