如何在 html 块内容中转义拉伸链接答案

【问题标题】：how to escape stretched-link in html block content如何在 html 块内容中转义拉伸链接
【发布时间】：2022-10-05 14:25:23
【问题描述】：

我正在使用 Django 开发一个应用程序，并在前端使用引导程序。你知道我如何在 bootstrap 中“逃脱”一个拉伸链接吗？

事实上，我喜欢将总卡片作为链接的行为，但问题是在卡片内部我有一些我想作为链接的标签，但这就像我的拉伸链接覆盖了卡片中的所有链接。

下面是适应我需要的 bootstrap 的 sn-p

<div class="row gx-5">
    {% for post  in post_list %}
    <div class="col-lg-4 mb-5">
        <div class="card h-100 shadow border-0">
            <img class="card-img-top" src="https://dummyimage.com/600x350/6c757d/343a40" alt="..." />
            <div class="card-body p-4">
                <a class="text-decoration-none link-dark stretched-link" href="{% url 'post-detail' post.id %}"><div class="h5 card-title mb-3">{{post.title}}</div></a>
                <p class="card-text mb-0">{{post.content}}</p>
            </div>
            <div class="card-footer p-4 pt-0 bg-transparent border-top-0">
                <div class="d-flex align-items-end justify-content-between">
                    <div class="d-flex align-items-center">
                        <div class="small">
                            {% for tag in post.tag.all %}
                            <a class="badge bg-secondary text-decoration-none link-light" href="{% url 'blog-index-tag' tag.tag_name %}">{{tag}}</a>
                            {% endfor %}
                            <div class="text-muted">April 2, 2022</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

【问题讨论】：

标签： html django django-templates

【解决方案1】：

添加比卡片更高的 z-index 并将位置设置为包含内部链接的元素的相对位置将使其可点击为 stretched link does not work with elements having position set to relative 并且更高的 z-index 将在堆叠上下文中将元素设置为卡片上方这页纸。

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

【讨论】：