Question

我刚刚使用Bootstrap在我的网站上成功设置了3张图像轮播。这就是它的样子：

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

<!-- Carousel start -->
<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="bootstrap/img/home-page-banner.jpg"/>
      <div class="container">
        <div class="carousel-caption">
          <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 class="btn btn-large btn-primary">Sign up!</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="bootstrap/img/home-page-banner.jpg"/>
      <div class="container">
        <div class="carousel-caption">
          <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 class="btn btn-large btn-primary">Sign up!</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="bootstrap/img/home-page-banner.jpg"/>
      <div class="container">
        <div class="carousel-caption">
          <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 class="btn btn-large btn-primary">Sign up!</a></p>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
<!-- Carousel end -->

你认为我在这里出错了什么？我不应该使用我不知道的carousel-indicators <ol>课程吗？

P.s。：我已经尝试.carousel-indicators { border-radius: 100%;}但没有成功。

Answer 1

添加border-radius：

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

请注意，您必须定位li课程中的carousel-indicators代码，并50%而不是100%。

因此，您不必使用!important覆盖默认的border-radius：

#myCarousel-indicators > li {
  border-radius: 50%;
}

<ol id="myCarousel-indicators" class="carousel-indicators"></ol>

Answer 2

对于Bootstrap 4，我在样式表中这样做了：

.carousel-indicators li {
    border-radius: 12px;
    width: 12px;
    height: 12px;
    background-color: #404040;
}

Answer 3

你可以试试这个：

sudo npm install phantomjs

Answer 4

对于精确圆，请确保您具有相同的宽度和高度，然后它将为您提供边框半径为 50% 的精确圆；

.carousel-indicators li{
  border-radius:50%
  width:15px;
  height:15px;
  background-color:#aaa;}

Answer 5

#myCarousel-indicators li{
    border-radius: 50%;
    width: 12px;
    height: 12px;
}

.carousel-indicators li{
    border-radius: 50%;
    width: 12px;
    height: 12px;
}

<ol id="myCarousel-indicators" class="carousel-indicators"></ol>

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

5 个答案: