Bootstrap 4轮播组件按钮显示异常问题求助

我运行了两个Bootstrap 4轮播组件实例，二者标记基本一致但显示效果完全不同：其中一个的切换按钮显示为0.5透明度的硬边框矩形，上一页和下一页的“箭头”按钮隐藏在其中。

正常显示的实例代码 #

<div id="carouselIndicators" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators" style="list-style: none;">
    <li data-target="#carouselIndicators" data-slide-to="0">&nbsp;</li>
    <li class="active" data-target="#carouselIndicators" data-slide-to="1">&nbsp;</li>
    <li data-target="#carouselIndicators" data-slide-to="2">&nbsp;</li>
</ul>
<div class="carousel-inner">
    <div class="carousel-item"><img class="d-block w-100" src="/foo/01.jpeg" alt="testing" /></div>
    <div class="carousel-item active"><img class="d-block w-100" src="/foo/02.jpeg" alt="testing" /></div>
    <div class="carousel-item"><img class="d-block w-100" src="/foo/03.jpeg" alt="testing" /></div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselIndicators" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true">&nbsp;</span> <span class="sr-only">Previous</span></button>
<button class="carousel-control-next" type="button" data-target="#carouselIndicators" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true">&nbsp;</span> <span class="sr-only">Next</span></button>
</div>

正常显示效果 #

显示异常的实例代码 #

<div id="carouselIndicators" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators" style="list-style: none;">
    <li data-target="#carouselIndicators" data-slide-to="0" class=""></li>
    <li class="active" data-target="#carouselIndicators" data-slide-to="1">&nbsp;</li>
    <li data-target="#carouselIndicators" data-slide-to="2" class=""></li>
</ul>
<div class="carousel-inner">
    <div class="carousel-item"><img class="d-block w-100" src="/foo/0002365.jpeg" alt="testing" /></div>
    <div class="carousel-item active"><img class="d-block w-100" src="/foo/0002364.jpeg" alt="testing" /></div>
    <div class="carousel-item"><img class="d-block w-100" src="/foo/0002363.jpeg" alt="testing" /></div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselIndicators" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true">&nbsp;</span> <span class="sr-only">Previous</span></button>
<button class="carousel-control-next" type="button" data-target="#carouselIndicators" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true">&nbsp;</span> <span class="sr-only">Next</span></button>
</div>

异常显示效果 #

我尝试为这些“上一页”和“下一页”矩形按钮强制设置新样式，但这也会影响到span元素，而第一个实例无需修改即可完美显示。实在搞不懂为何一个正常工作，另一个却出现异常，恳请提供帮助。

内容的提问来源于stack exchange，提问作者jimiayler