Розтягнуте посилання

Зробіть будь-який HTML-елемент або компонент Bootstrap доступним для натискання, «розтягнувши» вкладене посилання за допомогою CSS.

Додайте .stretched-linkдо посилання, щоб блок, що містить його, можна було натиснути за допомогою ::afterпсевдоелемента. У більшості випадків це означає, що елемент із position: relative;посиланням на .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сюди, щоб запобігти розтягуванню посилання за межі медіа-об’єкта.

Медіа з розтягнутим посиланням

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.

Іди кудись

<div class="media position-relative">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media 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>

Стовпці є 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">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)

Картка з розтягнутими посиланнями

Розтягнуте посилання тут не працюватиме, оскільки 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>