将引导程序轮播指示器更改为项目符号

问题描述

我正在尝试在左侧垂直对齐轮播指示器作为项目符号。我从@stackoverflow 那里得到了帮助并且几乎对齐了。我面临的一个小问题是，我不知道它是活动指标还是非活动指标，每次轮播上的幻灯片更改时，它们都会稍微向右移动。我希望这不会发生。请查看并告诉我缺少什么。

这是我的代码大纲：

HTML：

<section className="site-carousel">
<Carousel>
<Carousel.Item>
    <img className="d-block w-100" src={require("../Assets/Images/hair_salon_1.jpg").default}/>
    <Carousel.Caption>
      <h3>Hair Salon</h3>
      <p className="d-block w-100">Sed ut perspiciatis unde omnis iste natus error sit voluptatem,totam rem aperiam,eaque ipsa quae ab illo inventore et quasi architecto beatae vitae dicta sunt explicabo. totam rem aperiam,eaque ipsa quae ab illo inventore et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img className="d-block w-100" src={require("../Assets/Images/hair_salon_2.jpg").default}/>
    <Carousel.Caption>
      <h3>Hair Color</h3>
      <p className="d-block w-100">Sed ut perspiciatis unde omnis iste natus error sit voluptatem,eaque ipsa quae ab illo inventore et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img className="d-block w-100" src={require("../Assets/Images/hair_salon_3.jpg").default}/>
    <Carousel.Caption>
      <h3>Hair Stylists</h3>
      <p className="d-block w-100">Sed ut perspiciatis unde omnis iste natus error sit voluptatem,eaque ipsa quae ab illo inventore et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </Carousel.Caption>
  </Carousel.Item>
  </Carousel>
</section>

CSS

ol.carousel-indicators {
  position: absolute;
  bottom: 2%;
  margin: 0;
  border-radius: 100%;
  right: 95%;
  left: 15%;
  width: 3%;
  display: flex;
  flex-direction: column;
}
ol.carousel-indicators li{
  float: left;
  width: 33%;
  height: 10px;
  margin-bottom: 10px;
  border-radius: 100%;
  border: 0;
  background: yellow;
}

这是我得到的：

解决方法

你在css中的逻辑导致的对齐有什么问题。您将点向左推幻灯片宽度的 95%，同时将它们向右推幻灯片宽度的 15%。它甚至没有达到幻灯片宽度的 100% :D

ol.carousel-indicators {
  position: absolute;  
  right: 95%;
  left: 15%;  
}

您可以考虑将其编辑为：

ol.carousel-indicators {
  position: absolute;  
  right: 95%; 
}

bootstrap-4 carousel