Разтегната връзка

Направете всеки 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-tag, защото към нея се прилага трансформация.

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