html – Bootstrap轮播指示器是方形的;我想要他们

概述我刚刚使用Bootstrap在我的网站上成功设置了3个图像轮播.这就是它的样子： 如果你注意到,指标是方形的,我希望它们是圆形的！到目前为止,我所遵循的所有教程似乎都是正确的;我从未见过其他人的方形指示器旋转木马.这是我的HTML： <!-- Carousel start --><div id="myCarousel" class="carousel slide"> <ol class="c 我刚刚使用bootstrap在我的网站上成功设置了3个图像轮播.这就是它的样子：

如果你注意到,指标是方形的,我希望它们是圆形的！到目前为止,我所遵循的所有教程似乎都是正确的;我从未见过其他人的方形指示器旋转木马.这是我的HTML：

<!-- Carousel start --><div ID="myCarousel" >  <ol >    <li data-target="#myCarousel" data-slIDe-to="0" ></li>    <li data-target="#myCarousel" data-slIDe-to="1"></li>    <li data-target="#myCarousel" data-slIDe-to="2"></li>  </ol>  <div >    <div >      <img src="bootstrap/img/home-page-banner.jpg"/>      <div >        <div >          <h1>heading One</h1>          <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>          <p><a >Sign up!</a></p>        </div>      </div>    </div>    <div >      <img src="bootstrap/img/home-page-banner.jpg"/>      <div >        <div >          <h1>heading One</h1>          <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>          <p><a >Sign up!</a></p>        </div>      </div>    </div>    <div >      <img src="bootstrap/img/home-page-banner.jpg"/>      <div >        <div >          <h1>heading One</h1>          <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>          <p><a >Sign up!</a></p>        </div>      </div>    </div>  </div>  <a  href="#myCarousel" data-slIDe="prev">    <span ></span>  </a>  <a  href="#myCarousel" data-slIDe="next">    <span ></span>  </a></div><!-- Carousel end -->

你觉得我在这里怎么了？我是否应该使用旋转木马指示器< ol>我不知道呢？

P.s.：我已经尝试过.carousel-indicators {border-radius：100％;}没有成功.

解决方法 添加border-radius：

.carousel-indicators > li {  border-radius: 50%;}

请注意,您必须在carousel-indicators类中定位li标记,并且还要执行50％而不是100％.

因此,您不必使用！important来覆盖默认的border-radius：

#myCarousel-indicators > li {  border-radius: 50%;}<ol ID="myCarousel-indicators" ></ol>

总结

以上是内存溢出为你收集整理的html – Bootstrap轮播指示器是方形的;我想要他们全部内容，希望文章能够帮你解决html – Bootstrap轮播指示器是方形的;我想要他们所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。