如何将引导按钮“置于”拉伸的链接之上？

Question

我想将一些内容放入 Bootstrap 4 卡中，并在其上添加拉伸链接。我还想在此卡中包含一个按钮，该按钮的 URL 与拉伸的链接不同。

Bootstrap 的文档说：

不建议在拉伸链接中使用多个链接和点击目标。然而，如果需要的话，一些位置和 z-index 样式可以提供帮助。

但我无法让它工作。

我尝试过将按钮的 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.stackoverflow.com" role="button">Button Link</a>
                </div>
                <a href="https://www.duckduckgo.com" class="stretched-link"></a>
            </div>
        </div>
    </div>

我想让按钮可以点击，而不会被拉伸的链接覆盖。

有什么建议吗？

Answer 1

我必须将

z-index

设置为 > 1 的值，并且 必须在元素上设置

position: relative;

，以使其在

stretched-link

顶部可单击。

就您而言，这意味着：

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

Answer 2

将按钮设置为与

stretched-link

具有相同的 z 索引将使按钮可单击：

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

Answer 3

在嵌套在拉伸链接中的按钮或链接周围放置一个

<div>

。 然后给该 div 添加以下内容：

z-index:3;
position:relative;

Answer 4

将

class="stretched-link"

添加到按钮类中。代码如下。

<div class="col-auto align-self-center">
      <a class="btn btn-primary stretched-link" href="https://www.stackoverflow.com" role="button">Button Link</a>
</div>