Css .自定义引导转盘控件上的活动类

我正在引导4中创建一个带有自定义控件的旋转木马。 我已设法根据自定义控件滑动旋转木马。现在我面临的问题是，它并没有在主动控制上显示主动类

以下是我的引导4转盘HTML代码：

<div id="introslider" class="carousel slide" data-ride="carousel">
                    <div class="control">
                        <a class="btn btn-control active" href="#introslider" data-slide-to="0">Welcome</a>
                        <a class="btn btn-control" href="#introslider" data-slide-to="1">Test </a>
                        <a class="btn btn-control" href="#introslider" data-slide-to="2">Test 2</a>
                    </div>
                  <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="row">
                            <div class="col-md-4">
                                <img class="d-block w-100" src="http://placehold.it/200x400" alt="First slide">
                            </div>
                            <div class="col-md-8">
                                <div class="carousel-caption d-none d-md-block">
                                    <h3>Welcome</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
                                  </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="row">
                            <div class="col-md-4">
                                <img class="d-block w-100" src="http://placehold.it/200x400" alt="First slide">
                            </div>
                            <div class="col-md-8">
                                <div class="carousel-caption d-none d-md-block">
                                    <h3>Test</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
                                  </div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="row">
                            <div class="col-md-4">
                                <img class="d-block w-100" src="http://placehold.it/200x400" alt="First slide">
                            </div>
                            <div class="col-md-8">
                                <div class="carousel-caption d-none d-md-block">
                                    <h3>Test 2</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                  </div>
                            </div>
                        </div>
                    </div>
                  </div>
                </div>

结果如下：

---

你们知道我该怎么做吗？

这段代码会帮你们的

#{
边缘底部：50px；
}
#旋转木马标题p{
文本对齐：左对齐；
}
#旋转木马标题{
排名：0；
左：0；
右：0；
颜色：#000；
文本对齐：左对齐；
背景：#fff；
填充：20px；
身高：100%；
}
#内滑块控制{
位置：相对位置；
排名：0；
右：0；
证明内容：柔性端；
右边距：0；
}
#旋转木马内部{
位置：静态；
}
#旋转木马项目{
边缘顶部：45像素；
}
#introslider.control.btn.active{
背景：红色；
}

欢迎
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。这是一个很好的例子。Donec pede justo、fringilla vel、aliquet nec、vulputate eget、arcu。在埃尼姆·胡斯托、朗卡斯·乌特、伊佩拉、维尼那提斯·维塔、胡斯托。猫咪的口头禅是一种很好的口头禅

试验
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。这是一个很好的例子。Donec pede justo、fringilla vel、aliquet nec、vulputate eget、arcu。在埃尼姆·胡斯托、朗卡斯·乌特、伊佩拉、维尼那提斯·维塔、胡斯托。猫咪的口头禅是一种很好的口头禅

测试2
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一起，在婚姻的最后期限。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

它能帮助您：

#introslider {
    margin-bottom: 50px;
}
#introslider .carousel-caption p {
    text-align: left;
}
#introslider .carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    color: #000;
    text-align: left;
    background: #fff;
    padding: 20px;
    height: 100%;
}

#introslider .control {
    position: absolute;
    top: 0;
    right: 0;
}

#introslider .carousel-inner {
    position: static;
}

#introslider .carousel-item {
    margin-top: 45px;
}