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-items。或者，如果carousel-item支持在其容器中嵌套网格元素，我可以简单地将网格层次结构包裹在carousel-item中？

Answer 1

Bootstrap 4轮播仍需要carousel-item类才能工作，但可以调整它以与网格列一起使用。只需在每个carousel-item ...

中包含行＆gt; 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>

Bootstrap 4 Carousel列而不是carousel-item

1 个答案: