Bootstrap | Link 在带有 my-auto class 的 div 中不起作用

Question

我有一个包含 3 列的旋转木马，其中 1 列用于 Prev 和 Next 旋转木马控件。这些使用 my-auto class 在列中垂直对齐。但是，一旦我将 class 添加到列中，链接就不再有效。我在 div 列上尝试了 overflow:auto，但它没有帮助。有什么建议吗？我正在使用 Bootstrap 4.4.

这是我现在拥有的快速 JS-fiddle example。感谢您的帮助！

<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

您必须用 relative 覆盖 .carousel-indicator 的 position:absolute。

如果没有它，结合您当前的 CSS，它会覆盖整个旋转木马，有效地禁用与它的指针交互：

另一种选择（如果你想保留 position 无论出于何种原因），就是给它 display: inline-flex （这将它限制在它的内容 - 指标）。

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

即使您很想说："I don't care, I don't have another carousel in my site"，这也是一种次优方法，因为它限制了您：a) 要么不要在站点的其他任何地方使用另一个轮播，要么 b) 记住回到这个旋转木马并限制模组。

Bootstrap | Link 在带有 my-auto class 的 div 中不起作用

Bootstrap | Link doesn't work in a div with my-auto class

html

css

carousel

twitter-bootstrap

bootstrap-4