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

将bootstrap轮播指示器设置为点

1 个答案: