Bootstrap 如何提高引导按钮“超过”拉伸链接？

eqqqjvef 于 2023-11-15 发布在 Bootstrap

关注(0)|答案(4)|浏览(151)

我想把一些内容在Bootstrap 4卡上有一个拉伸链接。我还想在这张卡上包括一个按钮，它有一个URL不同的拉伸链接。
Bootstrap的文档说：
不建议使用拉伸链接的多个链接和点击目标。但是，如果需要，一些位置和z索引样式可以提供帮助。
但我不能让它工作。
我已经尝试过将按钮的z索引设置为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
我想让它这样的按钮是没有覆盖它的拉伸链接点击。
有什么建议吗？

twitter-bootstrap

来源：https://stackoverflow.com/questions/57452301/how-to-raise-bootstrap-button-over-a-stretched-link

4条答案

按热度按时间

vom3gejh1#

我必须将z-index设置为一个> 1的值，* 和 * 必须在元素上设置position: relative;，以使其在stretched-link之上可点击。
在你的情况下，这意味着：

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

字符串

赞(0）回复(0）举报 2023-11-15

ux6nzvsh2#

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

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

字符串

赞(0）回复(0）举报 2023-11-15

gk7wooem3#

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

z-index:3;
position:relative;

字符串

赞(0）回复(0）举报 2023-11-15

sg2wtvxw4#

将class="stretched-link"也添加到button类中。代码如下。

<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>

字符串

赞(0）回复(0）举报 2023-11-15

我来回答

Bootstrap 如何提高引导按钮“超过”拉伸链接？

4条答案

相关问题

热门标签

最新问答