如何将 bootstrap 按钮 "over" 拉长 link？

Question

我想将一些内容放在 Bootstrap 4 卡片中，并在上面拉伸 link。我还想在此卡片中包含一个按钮，它的 URL 不同于拉伸的 link。

Bootstrap 的文档说：

Multiple links and tap targets are not recommended with stretched links. However, some position and z-index styles can help should this be required.

但我无法让它工作。

我尝试过将按钮的 z-index 设置为 5000 之类的方法，但仍然无法点击。

    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col align-self-center">
                    <h5 class="card-title">This is a card</h5>
                    <h6 class="card-subtitle mb-2 text-muted">It has a button in it</h6>
                    <p class="card-text">How do I make the button rise up above the stretched link?</p>
                </div>
                <div class="col-auto align-self-center">
                    <a class="btn btn-primary" href="https://www.whosebug.com" role="button">Button Link</a>
                </div>
                <a href="https://www.duckduckgo.com" class="stretched-link"></a>
            </div>
        </div>
    </div>

card example

我想使按钮在没有被拉伸 link 覆盖的情况下可以点击。

有什么建议吗？

Answer 1

将按钮设置为与 stretched-link 具有相同的 z-index 将使按钮可点击：

.card .btn {
    z-index: 1;
}

Answer 2

我必须将 z-index 设置为大于 1 的值，和必须在元素上设置 position: relative; 以使其在stretched-link.

在你的情况下，这意味着：

.card .btn {
   z-index: 2;
   position: relative;
}

Answer 3

在按钮周围放置 <div> 或嵌套在拉伸 link 中的 link。然后给 div 以下内容：

z-index:3;
position:relative;

如何将 bootstrap 按钮 "over" 拉长 link？

How to raise bootstrap button "over" a stretched link?

twitter-bootstrap

bootstrap-4

bootstrap-cards