Bootstrap 4-将轮播指示器更改为点 [英] Bootstrap 4 - change the carousel indicators into dots

问题描述

我正在使用Bootstrap 4 Beta 2版本来做轮播。代码如下所示：

I am using Bootstrap 4 Beta 2 version to do a carousel. The code looks like below:

                <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>

轮播指示器显示为以下行：

And the carousel indicator show as lines:

有没有办法将指示器更改为点而不是线？我认为这是一个引导程序选项，但是我没有找到相关文档。我需要为此编写自定义CSS吗？

Is there a way I can change the indicators into dots instead of lines? I would assume it is an bootstrap option but I didn't find that relevant document. Do I need to write custom css for that?

推荐答案

是的，我认为您需要编写自定义CSS才能将线条划分为点。

需要覆盖两个属性（宽度和高度）并添加一个新属性， border-半径，改为。轮播指标li 。

设置宽度和 height 值相等，例如： 10px 并给出 border-radius 100％的c $ c>。

Yes, I think you need to write custom CSS for doing lines into dots.
You just need to override two properties (width and height) and add a new one, border-radius, to .carousel-indicators li.
Make width and height values equal eg: 10px each and give a border-radius of 100%.

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

这篇关于Bootstrap 4-将轮播指示器更改为点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！