Html Bootstrap 轮播指示器是方形的；我要它们圆
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32464619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap carousel indicators are square; I want them round
提问by TheLearner
I have just successfully set up a 3-image carousel on my site using Bootstrap. This is what it looks like:
我刚刚使用 Bootstrap 在我的网站上成功设置了一个 3 图像轮播。这是它的样子：
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:
如果您注意到，指标是方形的，我希望它们是圆形的！到目前为止，我遵循的所有教程似乎都正确；我从未见过其他人的旋转木马带有方形指示器。这是我的 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 -->
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?
你认为我在这里做错了什么？是否有任何我应该使用的课程我carousel-indicators<ol>还不知道？
P.s.: I have already tried .carousel-indicators { border-radius: 100%;}with no success.
Ps：我已经试过了.carousel-indicators { border-radius: 100%;}，没有成功。
回答by Chrillewoodz
Add border-radius:
添加border-radius：
.carousel-indicators > li {
border-radius: 50%;
}
Note that you have to target the litags within the carousel-indicatorsclass and also do 50%not 100%.
请注意，您必须针对li该内标签carousel-indicators类，也做50%不100%。
So you don't have to use !importantto override the default border-radius:
所以你不必使用!important来覆盖默认的边界半径：
#myCarousel-indicators > li {
border-radius: 50%;
}
<ol id="myCarousel-indicators" class="carousel-indicators"></ol>
回答by Bo Christian Skj?tt
For Bootstrap 4 I did this in my style sheet:
对于 Bootstrap 4，我在我的样式表中做了这个：
.carousel-indicators li {
border-radius: 12px;
width: 12px;
height: 12px;
background-color: #404040;
}回答by Tushar Khatiwada
You can try this:
你可以试试这个：
.glyphicon-chevron-right:before, .glyphicon-chevron-left:before {
background-color: #000;
padding: 5px;
border-radius: 50%;
}
