Stretched link (растянутая ссылка)

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

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

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

При растянутых ссылках не рекомендуется использовать несколько ссылок и целей касания. Тем не менее, некоторые position и z-index стили могут помочь если это потребуется.

Card with stretched link

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">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 здесь, чтобы ссылка не выходила за пределы родительского элемента.

Custom component with stretched link

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">Custom component with stretched link</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>

Columns with stretched link

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">Columns with stretched link</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 сделают элемент содержащим блоком:

position значение, отличное static
A transform или perspective значение, отличное от none
will-change значение transform или perspective
filter значение, отличное none или will-change значение filter (работает только на Firefox)

Card with stretched links

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

На этой странице