将引导轮播指示器样式设置为点答案

【问题标题】：Styling bootstrap carousel indicators into dots将引导轮播指示器样式设置为点
【发布时间】：2017-04-23 06:46:27
【问题描述】：

这里有点引导新手，我正在尝试将引导程序中的轮播指示器设置为点，而不是它们给你的默认矩形。我有轮播工作，我正在尝试通过 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 或其他方法来解决这个问题，用点代替矩形？非常感谢！

【问题讨论】：

标签： html css carousel

【解决方案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

【讨论】：