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

【问题标题】：Bootstrap | Link doesn't work in a div with my-auto class引导程序 |链接在带有 my-auto 类的 div 中不起作用
【发布时间】：2020-03-26 10:26:26
【问题描述】：

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

【问题讨论】：

很难在没有看到您的代码的情况下提供帮助
欢迎来到 Stack Overflow _ 您需要展示您拥有的代码，以便 SO 贡献者可以帮助您。访问 SO 帮助中心获取指南，包括有关显示最小可重现示例的常见问题解答 >>> stackoverflow.com/help/minimal-reproducible-example
感谢您的输入，我附上了代码。 @AkberIqbal
你到底在哪里使用.my-auto 类，它与所提出的问题有什么关系（除了在标题中，没有明显的原因）？
@AndreiGheorghiu 不幸的是，我没有立即附上代码。与此同时，我试图自己弄清楚并使用不同的课程。不过，感谢您的努力和帮助。

标签： html css twitter-bootstrap bootstrap-4 carousel

【解决方案1】：

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

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

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

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

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

【讨论】：

非常感谢您的回答和耐心。抱歉我的问题和代码混乱 - 我是在这里提问和使用小提琴的新手，但你说得对。下次我会问得更好。还有一件事 - 有没有办法将轮播指示器与左侧的 h1 对齐而不将其放入轮播项目 div 中？
Like this?。不，我认为这不可能，抱歉。