Как избежать растягивания ссылки в содержимом html-блока

Я разрабатываю приложение на Django и использую bootstrap для фронт-энда. Знаете ли вы, как я могу "спасти" растянутую ссылку в bootstrap?

На самом деле мне нравится поведение, когда вся карта является ссылкой, но проблема в том, что внутри карты у меня есть некоторый тег, который я хочу сделать ссылкой, но как будто моя растянутая ссылка охватывает все ссылки в карте.

enter image description here

Ниже приведен фрагмент из bootstrap, адаптированный под мои нужды

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

Добавление более высокого z-индекса, чем у карточки, и установка позиции как относительной для элемента, содержащего внутреннюю ссылку, сделает ее кликабельной, поскольку растянутая ссылка не работает с элементами, у которых позиция установлена как относительная, а более высокий z-индекс установит элемент выше карточки в контексте суммирования для страницы.

Добавьте следующее, чтобы установить положение и z-индекс для всех значков внутри карточек:

.card .badge {
    z-index: 2;
    position: relative;
}
Вернуться на верх