如何将 Bootstrap 轮播缩略图放置在上方和侧面？

Question

我希望创建 Bootstrap 5 缩略图轮播的变体，其中缩略图位于幻灯片部分的顶部或左侧（我需要这两个变体）。当前默认位于底部。

基础模型运行良好。但是，我无法将其拆分为行（缩略图）和列（左列上的缩略图） - 当我尝试以不同方式包装轮播部分时，最终结果是相同的。 下面是基本代码，之后是我如何尝试拆分它但未成功的代码片段。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container">
  <!-- Carousel wrapper -->
  <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-bs-ride="carousel">

    <!-- Thumbnails -->

    <div class="row">
      <div class="">
        <div class="my slider carousel-indicators" style="margin-bottom: ;">
          <div class="container op position-relative">
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1" style="width: 100px;">
          <img class="d-block w-100"
            src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(88).webp" class="img-fluid" />
        </button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2" style="width: 100px;">
          <img class="d-block w-100"
            src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(121).webp" class="img-fluid" />
        </button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3" style="width: 100px;">
          <img class="d-block w-100"
            src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(31).webp" class="img-fluid" />
        </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Thumbnails -->

    <!-- Slides -->

    <div class="carousel-inner mb-5">
      <div class="carousel-item active">
        <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(88).webp" class="d-block w-100" alt="..." />
      </div>
      <div class="carousel-item">
        <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(121).webp" class="d-block w-100" alt="..." />
      </div>
      <div class="carousel-item">
        <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(31).webp" class="d-block w-100" alt="..." />
      </div>
    </div>


    <!-- Slides -->

    <!-- Controls -->
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
    <!-- Controls -->

  </div>
</div>
<!-- Carousel wrapper -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

我尝试用行/网格换行将其拆分为不同的缩略图和幻灯片。然而，缩略图部分仍位于屏幕底部。

下面是一个将缩略图放置在顶部的示例，与我所做的其他尝试一样，结果是相同的，即缩略图位于底部：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container">
  <!-- Carousel wrapper -->
  <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-bs-ride="carousel">

    <!-- Thumbnails -->
    <div class="col">
      <div class="row">


        <div class="my slider carousel-indicators" style="margin-bottom: ;">
          <div class="container op position-relative">
            .... closing with </div> etc'

          <!--Thumbnails-->

          <!-- Slides -->
          <div class="row">
            <div class="col">
              <div class="carousel-inner mb-5">
                <div class="carousel-item active">
                  .... closing with </div> etc'

                <!-- Slides -->

              </div>
            </div>

            Def

            <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

我还使用了 col md-4 的变体，反转行/列...不起作用。

我设法在没有轮播的情况下创建布局，但我希望有一个更清晰的代码，并且从一个类似的结构提供媒体。

任何输入、参考都会很好。

Answer 1

我认为我不会尝试在这里应用行和列。轮播内部发生的事情太复杂了。相反，我会用填充物移动旋转木马，为拇指腾出空间。

.carousel.carousel-thumbs-top {
  padding-top: 60px;
}

.carousel.carousel-thumbs-top .carousel-indicators {
  top: 0;
  bottom: auto;
}

.carousel .carousel-indicators button {
  width: 100px !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col">

      <!-- Carousel wrapper -->
      <div id="carouselExampleIndicatorsLeft" class="carousel slide carousel-fade carousel-thumbs-top" data-bs-ride="carousel">

        <!-- Thumbnails -->
        <div class="slider carousel-indicators position-absolute">
          <button type="button" data-bs-target="#carouselExampleIndicatorsLeft" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1">
          <img class="d-block w-100"
            src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(88).webp" class="img-fluid" />
        </button>

          <button type="button" data-bs-target="#carouselExampleIndicatorsLeft" data-bs-slide-to="1" aria-label="Slide 2">
          <img class="d-block w-100"
            src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(121).webp" class="img-fluid" />
        </button>

          <button type="button" data-bs-target="#carouselExampleIndicatorsLeft" data-bs-slide-to="2" aria-label="Slide 3">
          <img class="d-block w-100"
            src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(31).webp" class="img-fluid" />
        </button>
        </div>

        <!-- Slides -->
        <div class="carousel-inner mb-5">
          <div class="carousel-item active">
            <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(88).webp" class="d-block w-100" alt="..." />
          </div>
          <div class="carousel-item">
            <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(121).webp" class="d-block w-100" alt="..." />
          </div>
          <div class="carousel-item">
            <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(31).webp" class="d-block w-100" alt="..." />
          </div>
        </div>

        <!-- Controls -->
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>

        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
      </div>
    </div>
    <!-- Carousel wrapper -->
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Answer 2

在示例（代码片段）中，上一个和下一个箭头不起作用