Сделайте любой элемент HTML или компонент Bootstrap интерактивным, «растягивая» вложенную ссылку с помощью CSS.
Добавьте .stretched-link
к ссылке, чтобы сделать ее содержащий блок доступным для кликов через псевдоэлемент ::after
. В большинстве случаев это означает, что элемент с position: relative;
, который содержит ссылку с классом .stretched-link
, является интерактивным. Обратите внимание, учитывая как работает CSS position
, .stretched-link
нельзя смешивать с большинством элементов таблицы.
Карточки имеют в Bootstrap по умолчанию position: relative
, поэтому в этом случае Вы можете безопасно добавить класс .stretched-link
к ссылке в карточке без каких-либо других изменений HTML.
При растянутых ссылках не рекомендуется использовать несколько ссылок и целей касания. Однако некоторые стили position
и z-index
могут помочь, если это потребуется.
Карточка с растянутой ссылкой
Небольшой пример текста, который должен основываться на названии карты и составлять основную часть содержимого карты.
Перейти куда-нибудь<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Карточка с растянутой ссылкой</h5>
<p class="card-text">Небольшой пример текста, который должен основываться на названии карты и составлять основную часть содержимого карты.</p>
<a href="#" class="btn btn-primary stretched-link">Перейти куда-нибудь</a>
</div>
</div>
Медиа-объекты по умолчанию не имеют position: relative
, поэтому нам нужно добавить сюда .position-relative
, чтобы ссылка не растягивалась за пределы медиа-объекта.
Медиа с растянутой ссылкой
Это некий заполнитель для медиа-объекта. Он предназначен для имитации того, как будет выглядеть реальный контент, и мы используем его здесь, чтобы придать компоненту немного тела и размера.
Иди куда-нибудь<div class="media position-relative">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Медиа с растянутой ссылкой</h5>
<p>Это некий заполнитель для медиа-объекта. Он предназначен для имитации того, как будет выглядеть реальный контент, и мы используем его здесь, чтобы придать компоненту немного тела и размера.</p>
<a href="#" class="stretched-link">Иди куда-нибудь</a>
</div>
</div>
Столбцы по умолчанию являются position: relative
, поэтому для интерактивных столбцов требуется только класс .stretched-link
для ссылки. Однако для растягивания ссылки на весь .row
требуется .position-static
для столбца и .position-relative
для строки.
Столбцы с растянутой ссылкой
Другой экземпляр содержимого-заполнителя для этого другого настраиваемого компонента. Он предназначен для имитации того, как будет выглядеть реальный контент, и мы используем его здесь, чтобы придать компоненту немного тела и размера.
Иди куда-нибудь<div class="row no-gutters bg-light position-relative">
<div class="col-md-6 mb-md-0 p-md-4">
<img src="..." class="w-100" alt="...">
</div>
<div class="col-md-6 position-static p-4 pl-md-0">
<h5 class="mt-0">Столбцы с растянутой ссылкой</h5>
<p>Другой экземпляр содержимого-заполнителя для этого другого настраиваемого компонента. Он предназначен для имитации того, как будет выглядеть реальный контент, и мы используем его здесь, чтобы придать компоненту немного тела и размера.</p>
<a href="#" class="stretched-link">Иди куда-нибудь</a>
</div>
</div>
Определение содержащего блока
Если растянутая ссылка не работает, вероятно, причиной будет содержащий блок. Следующие свойства CSS сделают элемент содержащим блоком:
- Значение
position
, отличное отstatic
- Значение
transform
илиperspective
, отличное отnone
- Значение
will-change
дляtransform
илиperspective
- Значение
filter
, отличное отnone
или значениеwill-change
изfilter
(работает только в Firefox)
Карточка с растянутой ссылкойs
Небольшой пример текста, который должен основываться на названии карты и составлять основную часть содержимого карты.
Растянутая ссылка здесь не будет работать, потому что к ссылке добавляется position: relative
Эта растянутая ссылка будет распространяться только на тег p
, поскольку к ней применяется преобразование.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Карточка с растянутой ссылкойs</h5>
<p class="card-text">Небольшой пример текста, который должен основываться на названии карты и составлять основную часть содержимого карты.</p>
<p class="card-text">
<a href="#" class="stretched-link text-danger" style="position: relative;">Растянутая ссылка здесь не будет работать, потому что к ссылке добавляется <code>position: relative</code></a>
</p>
<p class="card-text bg-light" style="transform: rotate(0);">
Эта <a href="#" class="text-warning stretched-link">растянутая ссылка</a> будет распространяться только на тег <code>p</code>, поскольку к ней применяется преобразование.
</p>
</div>
</div>