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>

card example

我想制作该按钮，以便在没有延伸链接覆盖的情况下单击该按钮。

有什么提示吗？

Answer 1

在嵌套在拉伸链接中的按钮或链接周围放置<div>。然后为该div提供以下内容：

z-index:3;
position:relative;

Answer 2

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

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

Answer 3

我必须将z-index设置为大于1的值，并且必须在元素上设置position: relative;，以使其在stretched-link上方可点击

对于您而言，这意味着：

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

如何在延伸链接上方“增加”自举按钮？

3 个答案: