Перейти к основному содержанию Перейти к навигации по документам
Cмотреть на GitHub

Растянутая ссылка

Сделайте любой HTML-элемент или компонент Bootstrap кликабельным, «растягивая» вложенную ссылку с помощью CSS.

Добавьте .stretched-link к ссылке, чтобы сделать ее содержащий блок кликабельным через псевдоэлемент ::after. В большинстве случаев это означает, что элемент с position: relative;; который содержит ссылку с классом .stretched-link, можно нажимать.

По умолчанию в Bootstrap карты имеют position: relative, поэтому в этом случае вы можете безопасно добавить класс .stretched-link к ссылке в карте без каких-либо других изменений HTML.

Несколько ссылок и меток не рекомендуется с растянутыми ссылками. Однако, некоторые стили position и z-index могут помочь, если это потребуется.

Card image cap
Карточка с растянутой ссылкой

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
<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">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, чтобы предотвратить растяжение ссылки за пределы медиа-объекта.

Generic placeholder image
Пользовательский компонент с растянутой ссылкой

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Go somewhere
<div class="d-flex position-relative">
  <img src="..." class="flex-shrink-0 mr-3" alt="...">
  <div>
    <h5 class="mt-0">Пользовательский компонент с растянутой ссылкой</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>
Generic placeholder image
Столбцы с растянутой ссылкой

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Go somewhere
<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 pl-md-0">
    <h5 class="mt-0">Столбцы с растянутой ссылкой</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

Идентификация содержащего блока

Если растянутая ссылка не работает, причина может заключаться в содержащем блоке. Следующие свойства CSS сделают элемент содержащим блок:

  • A position отличное от static
  • A transform или perspective отличное от none
  • A will-change значение transform или perspective
  • A filter отличное от none или will-change изменяющее filter (работает только в Firefox)
Card image cap
Карточка с растянутыми ссылками

Some quick example text to build on the card title and make up the bulk of the card's content.

Stretched link will not work here, because position: relative is added to the link

This stretched link will only be spread over the p-tag, because a transform is applied to it.

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