有人可以帮助我使用 bootstrap4 轮播指示器吗答案

【问题标题】：Can somebody help me with bootstrap4 carousel-indicators有人可以帮助我使用 bootstrap4 轮播指示器吗
【发布时间】：2020-05-30 11:39:51
【问题描述】：

我添加了前一个和下一个文本，而不是常规的轮播指示器。我能够水平居中对齐文本，但垂直居中它没有居中。

以下是轮播指示器 html 和样式：

.carousel-indicators {
   top: 400px;
}
.carousel-indicators li {
   position: relative;
   left: 20px;
   width: 208px;
   height: 56px;
   border-radius: 12px;
   background-color: var(--dark-blue);
   margin-right: 2em;
   text-indent: unset;
   color: var(--white-bg);
   font-size: 20px;
   cursor: pointer;
}
.carousel-indicators .active {
   background-color: var(--dark-blue);
}

<ol class="carousel-indicators text-uppercase text-center">
   <li data-target="#mycarouselIndicators" data-slide-to="0" class="active" > Previous </li>
   <li data-target="#mycarouselIndicators" data-slide-to="1">Next</li>
</ol>

【问题讨论】：

1. 上一页
2. 下一步
.carousel-indicators { top: 400px; } .carousel-indicators li { 位置：相对；左：20px；宽度：208px；高度：56px；边框半径：12px；背景颜色：var（--深蓝色）；右边距：2em；文本缩进：未设置；颜色：var(--white-bg);字体大小：20px；光标：指针； } .carousel-indicators .active { 背景色：var(--dark-blue); }

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

将style="bottom: 50%;" 添加到您的<ol>，它应该可以按预期工作。

<ol class="carousel-indicators text-uppercase text-center" style="bottom: 50%;">
   <li data-target="#mycarouselIndicators" data-slide-to="0" class="active" > Previous </li>
   <li data-target="#mycarouselIndicators" data-slide-to="1">Next</li>
</ol>

【讨论】：