html - 将 Bootstrap 轮播指示器样式化为点

Question

这里有点 bootstrap noob，我试图将 bootstrap 中的旋转木马指示器样式设置为点，而不是他们给你的默认矩形。我的旋转木马正在工作，我正在尝试通过这样访问来通过 css 更改指标:

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

}

输出确实创建了圆圈，like so ，但是圆圈太大了，所以我尝试将代码更改为:

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

}

而不是圆圈变小，(至少我假设这是应该发生的事情..)他们最终看起来更像 this .我似乎找不到解决这个问题的方法。有没有人知道如何用 CSS 或其他方法解决这个问题，让指示器点而不是矩形？非常感谢!

Answer 1

像这样编辑标签元素；

nav.carousel label {
  display: inline-block;
  background: #FFFFFF;
  overflow: hidden;
  text-indent: -999px;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  box-shadow: inset 0 1px 1px 0 #999;
}

隐藏单选按钮；

nav.carousel input[type=radio] {
  display: none;
}

 nav.carousel:hover {
  cursor: default;
}
nav.carousel label:hover {
  background: #bbb;
  cursor: pointer;
  box-shadow: inset 0 1px 1px 0 #777;
}
nav.carousel input:checked + label {
  background: linear-gradient(#FFFFFF, #bc1414);
  box-shadow: inset 0 0 1px 1px #FFFFFF;
}

然后像这样使用；

<nav class="carousel">
  <input id="item1" type="radio" name="dot" checked>
  <label for="item1">item 1</label>

  <input id="item2" type="radio" name="dot">
  <label for="item2">item 2</label>
</nav>

您可以根据需要更改宽度和高度。您可以查看工作示例；

https://jsfiddle.net/rnz9w1zz/?utm_source=website&utm_medium=embed&utm_campaign=rnz9w1zz