html - Bootstrap Carousel Arrows 不会响应 z-index 的变化

Question

我已经从原始布局修改了旋转木马中 Bootstrap 箭头图标的 html，以便字形图标成为上一个和下一个的超链接。我遇到的问题是，当旋转木马在小屏幕上时，附加在 carousel-inner 中的元素(参见代码，附加是用 d3 完成的)似乎与左字形重叠，它不能用于转到上一张幻灯片。这不会发生在更大的屏幕上。 (请注意，它们最初是隐藏的，但我在构建页面时显示它们)虽然我将 prev 和 next 绑定(bind)到键盘箭头，但这仍然会让一些用户感到困惑。我已经尝试确保左箭头在 CSS 中分配了一个位置，然后在页面上给出了最高的 z 值，但它仍然不起作用。是否有其他方法可以使这项工作正常进行？

<div class="carousel-wrapper">
    <div id="defect-carousel" class="carousel slide" data-interval="false">
        <!-- Controls -->
        <div class="left carousel-control" style="display:none;">
        <a href="#defect-carousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
         </div>
        <!-- Wrapper for slides -->
        <div class="container">
            <div class="carousel-inner"></div>
        </div>

        <div class="right carousel-control" style="display:none;">
        <a href="#defect-carousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
        </div>
    </div>
</div>

Answer 1

我能够通过将更高的 z-index 分配给左侧类而不是轮播控件或字形图标类来解决问题。