Розтягнуте посилання
Зробіть будь-який HTML-елемент або компонент Bootstrap доступним для натискання, «розтягнувши» вкладене посилання за допомогою CSS.
Додайте .stretched-link
до посилання, щоб блок, що містить його, можна було натиснути за допомогою ::after
псевдоелемента. У більшості випадків це означає, що елемент із position: relative;
посиланням на .stretched-link
клас можна натиснути. Зверніть увагу, як працює CSSposition
, .stretched-link
його не можна змішувати з більшістю елементів таблиці.
Картки є position: relative
за замовчуванням у Bootstrap, тому в цьому випадку ви можете безпечно додати .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">Card with stretched link</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>
Більшість спеціальних компонентів не мають position: relative
за замовчуванням, тому нам потрібно додати .position-relative
сюди, щоб запобігти розтягуванню посилання за межі батьківського елемента.
Спеціальний компонент із розтягнутим посиланням
Це деякий вміст заповнювача для спеціального компонента. Він призначений для імітації того, як виглядатиме деякий вміст у реальному світі, і ми використовуємо його тут, щоб надати компоненту трохи тіла та розміру.
Іди кудись<div class="d-flex position-relative">
<img src="..." class="flex-shrink-0 me-3" alt="...">
<div>
<h5 class="mt-0">Custom component with stretched link</h5>
<p>This is some placeholder content for the custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
<a href="#" class="stretched-link">Go somewhere</a>
</div>
</div>
Стовпчики з натягнутим ланкою
Інший екземпляр вмісту заповнювача для цього іншого спеціального компонента. Він призначений для імітації того, як виглядатиме деякий вміст у реальному світі, і ми використовуємо його тут, щоб надати компоненту трохи тіла та розміру.
Іди кудись<div class="row g-0 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 p-4 ps-md-0">
<h5 class="mt-0">Columns with stretched link</h5>
<p>Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
<a href="#" class="stretched-link">Go somewhere</a>
</div>
</div>
Ідентифікація блоку, що містить
Якщо здається, що розтягнуте посилання не працює, причиною, ймовірно, є блок, що містить . Наступні властивості CSS зроблять елемент містким блоком:
- Значення
position
, відмінне відstatic
- A
transform
абоperspective
значення, відмінне відnone
will-change
Значенняtransform
або _perspective
- Значення
filter
, відмінне відnone
абоwill-change
значенняfilter
(працює лише у Firefox)
Картка з розтягнутими посиланнями
Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.
Розтягнуте посилання тут не працюватиме, оскільки position: relative
додається до посилання
Це розтягнуте посилання розповсюджуватиметься лише на p
тег -, оскільки до нього застосовано перетворення.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card with stretched links</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text">
<a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because <code>position: relative</code> is added to the link</a>
</p>
<p class="card-text bg-light" style="transform: rotate(0);">
This <a href="#" class="text-warning stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.
</p>
</div>
</div>