引导程序 | 链接在带有 my-auto 类的 div 中不起作用

Question

我有一个带有 3 列的轮播，其中 1 列用于上一个和下一个轮播控件。 这些使用 my-auto 类在列中垂直对齐。 但是，一旦我将该类添加到列中，链接就不再起作用。 我在列 div 上尝试了溢出：自动，但它没有帮助。 有什么建议吗？ 我正在使用 Bootstrap 4.4。

这是我现在拥有的一个快速 JS-fiddle示例。 任何帮助表示赞赏！

<div id="carouselOfferings" class="carousel slide" data-ride="carousel" data-interval="3000">
    <div class="container">
        <ol class="carousel-indicators">
            <li data-target="#carouselOfferings" data-slide-to="0" class="active"></li>
            <li data-target="#carouselOfferings" data-slide-to="1"></li>
        </ol>
    </div>
    <div class="container-fluid carousel-inner">
        <div class="carousel-item active">
            <div class="row">
                <div class="offset-lg-1 col-lg-5 carousel-offerings-txt">
                    <h2>Heading 1</h2>
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    </p>
                </div>
                <div class="offset-lg-1 col-lg-1 align-self-center" >
                    <a href="#carouselOfferings" class="left carousel-control small-uppercase-txt" data-slide="prev">prev</a>
                    <a href="#carouselOfferings" class="right carousel-control small-uppercase-txt " data-slide="next">next</a>
                </div>
                <div class="col-lg-4 col-img-full-div">
                    <img src="https://c402277.ssl.cf1.rackcdn.com/photos/2325/images/hero_small/mountains-hero.jpg?1345838509">
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="row">
                <div class="offset-lg-1 col-lg-5 carousel-offerings-txt">
                    <h2>Heading 2</h2>
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    </p>
                </div>
                <div class="offset-lg-1 col-lg-1 align-self-center" >
                    <a href="#carouselOfferings" class="left carousel-control small-uppercase-txt" data-slide="prev">prev</a>
                    <a href="#carouselOfferings" class="right carousel-control small-uppercase-txt " data-slide="next">next</a>
                </div>
                <div class="col-lg-4 col-img-full-div">
                    <img src="https://c402277.ssl.cf1.rackcdn.com/photos/2325/images/hero_small/mountains-hero.jpg?1345838509">
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

你必须重载.carousel-indicator的position:absolute与relative 。

没有它，结合你当前的 CSS，它会覆盖整个轮播，有效地禁用与它的指针交互：

---

另一种选择（如果您出于任何原因想保留该position ）是给它display: inline-flex （将其限制为它的内容 - 指标）。

---

作为旁注，请记住，一般来说，应用 CSS 覆盖可能会破坏 Bootstrap 的正常使用被认为是不好的做法。
例如，如果您想在任何其他页面中使用另一个 Bootstrap 轮播，您现有的 CSS 可能会破坏它。 更好的方法是将自定义类/ID 应用于您要自定义的项目并将该类/ID 用作选择器。

即使您很想说： “我不在乎，我的网站中没有另一个轮播” ，这也是一种次优方法，因为它限制了您： a)要么不在其他任何地方使用另一个轮播在网站中或b)记得回到这个轮播并限制模组。