Bootstrap: 如何在轮播指示器中显示文本？

Question

我想在 bootstrap 中将文本显示为轮播指示器。默认情况下，属性 text-indent 设置为 -999px for .carousel-indicators [data-bs-target]，我将其更改为 0。代码如下：

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
   <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
         aria-current="true" aria-label="Slide 1" style="
            text-indent: 0;">Test Button</button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
         aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
         aria-label="Slide 3"></button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"
         aria-label="Slide 4"></button>
   </div>

   <div class="carousel-inner">
      <div class="carousel-item active">
         <!-- Some other content for this slide -->
         <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
         <!-- Some other content for this slide -->
         <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
         <!-- Some other content for this slide -->
         <img src="..." class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
         <!-- Some other content for this slide -->
         <img src="..." class="d-block w-100" alt="...">
      </div>
   </div>
</div>

我的要求是以文字为指示的轮播幻灯片。能解释一下为什么内容是开箱即用的吗？以及如何将文本显示为指标？

提前致谢！

Answer 1

只需将“文本”class 放在包含文本的按钮上：

<button type="button" class="text">Test Button</button>

然后试试这个 CSS:

.carousel-indicators [data-bs-target] {
            width: 20px;
            height: 20px;
            border-radius: 10px;
            overflow: hidden;
        }
        .carousel-indicators .text[data-bs-target] {
            width: auto;
            height: 20px;
            text-indent: 0;
        }

我希望这会奏效。

Bootstrap: 如何在轮播指示器中显示文本？

Bootstrap: How to show text in carousel indicators?

css

twitter-bootstrap