Перейти до основного вмісту Перейти до навігації документами
in English

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

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

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

Картки є position: relativeза замовчуванням у Bootstrap, тому в цьому випадку ви можете безпечно додати .stretched-linkклас до посилання на картці без будь-яких інших змін у HTML.

Для розтягнутих посилань не рекомендується використовувати кілька посилань і елементів торкання. Однак деякі positionстилі z-indexможуть допомогти, якщо це буде потрібно.

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

Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.

Іди кудись
<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сюди, щоб запобігти розтягуванню посилання за межі батьківського елемента.

Generic placeholder image
Спеціальний компонент із розтягнутим посиланням

Це деякий вміст заповнювача для спеціального компонента. Він призначений для імітації того, як виглядатиме деякий вміст у реальному світі, і ми використовуємо його тут, щоб надати компоненту трохи тіла та розміру.

Іди кудись
<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>
Generic placeholder image
Стовпчики з натягнутим ланкою

Інший екземпляр вмісту заповнювача для цього іншого спеціального компонента. Він призначений для імітації того, як виглядатиме деякий вміст у реальному світі, і ми використовуємо його тут, щоб надати компоненту трохи тіла та розміру.

Іди кудись
<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)
Card image cap
Картка з розтягнутими посиланнями

Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.

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