时间戳

首页 > 解决方案 > 有人可以帮助我使用 bootstrap4 轮播指示器吗

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

问题描述

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

以下是轮播指示器 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>

标签： csstwitter-bootstrapbootstrap-4

解决方案

添加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>

推荐阅读