我正在使用Bootstrap 4 Beta 2版本做一个轮播。代码如下所示:
<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>
转盘指示器显示为线条:
有没有方法可以把指示器改成点而不是线?我会假设这是一个 Bootstrap 选项,但是我没有找到相关的文档。我需要为此编写自定义css吗?
7条答案
按热度按时间r3i60tvu1#
是的,我认为你需要写自定义的CSS做线成点。
您只需要覆盖两个属性(
width
和height
)并向.carousel-indicators li
添加一个新属性border-radius
。使
width
和height
值相等,例如:10px
,并给予100%
的border-radius
。uyto3xhc2#
在bootstrap 5中,如果你改变注解中的内容,它会起作用。
示例:image of dots
ivqmmu1c3#
我必须包括旋转木马才能正常工作。
lrl1mhuk4#
如果你有一个图标,你只需要改变图标路径,使用inspect元素你可以得到类名。我用Mozilla得到类名,然后我用两个svg图标把默认图标改变成自定义图标。
yr9zkbsy5#
必须使用单词!important覆盖内联样式。这将覆盖元素具有的任何其他样式。
通过执行以下操作,我可以将指示器样式设置为带蓝色的圆圈:
现代的Bootstrap旋转木马现在把它们布置成按钮。
myss37ts6#
使用此:
fnvucqvd7#
我用这个来画大圆,
}