自举轮播指示器为正方形；我要他们绕 [英] Bootstrap carousel indicators are square; I want them round

问题描述

我刚刚使用Bootstrap在自己的网站上成功设置了3张图片轮播.看起来是这样的:

I have just successfully set up a 3-image carousel on my site using Bootstrap. This is what it looks like:

如果您注意到，指示器是方形的，我希望它们是圆形的！到目前为止，我所遵循的所有教程似乎都是正确的.我从未见过其他人的带有方形指示器的轮播.这是我的HTML:

If you notice, the indicators are square and I want them to be round! All the tutorials I have followed thus far seem to get it right; I have never seen anyone else's carousel with square indicators. Here's my 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>使用任何类吗?

What do you think I am going wrong with here? Is there any class I should be using with the carousel-indicators <ol> that I am not aware of yet?

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

P.s.: I have already tried .carousel-indicators { border-radius: 100%;} with no success.

推荐答案

添加border-radius:

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

请注意，您必须定位carousel-indicators类中的li标记，并且也必须执行50%而不是100%.

Note that you have to target the li tags within the carousel-indicators class and also do 50% not 100%.

因此您不必使用!important覆盖默认的边框半径:

So you don't have to use !important to override the default border-radius:

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

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

这篇关于自举轮播指示器为正方形；我要他们绕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！