引导轮播箭头不会响应 z-index 更改

Question

我已从原始布局修改了轮播中引导箭头图标的 html，以便 glyphicon 是 prev 和 next 的超链接。我遇到的问题是，当轮播在小屏幕上时，附加在 carousel-inner 中的元素（参见代码，附加是用 d3 完成的）似乎与左字形重叠，它不能用于转到上一张幻灯片。这不会发生在更大的屏幕上。 （请注意，它们最初是隐藏的，但我会在构建页面时显示它们）虽然我将 prev 和 next 绑定到键盘箭头，但这仍然会给某些用户造成混淆。我已经尝试确保向左箭头在 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 分配给左侧类而不是轮播控件或 glyphicon 类来解决此问题。