Question

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

以下是我现在所掌握的快速JS小提琴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的{{1}}。

没有它，与您当前的CSS结合使用，它将覆盖整个轮播，从而有效地禁用指针交互：

另一种选择（如果出于任何原因要保留position:absolute的话）是给它display: inline-flex（将其限制在其内容范围内-指示符）。

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

即使您很想说：“我不在乎，我的站点中也没有其他轮播” ，但这是次优的方法，因为它限制了您： a）要么不要在网站的其他任何地方使用其他轮播，要么 b）记住要回到此位置轮播并限制mods。

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

1 个答案: