Розтягнуте посилання
Зробіть будь-який HTML-елемент або компонент Bootstrap доступним для натискання, «розтягнувши» вкладене посилання за допомогою CSS.
Додайте .stretched-link
до посилання, щоб блок, що містить його, можна було натиснути за допомогою ::after
псевдоелемента. У більшості випадків це означає, що елемент із position: relative;
посиланням на .stretched-link
клас можна натиснути.
Картки є position: relative
за замовчуванням у Bootstrap, тому в цьому випадку ви можете безпечно додати .stretched-link
клас до посилання на картці без будь-яких інших змін у HTML.
Для розтягнутих посилань не рекомендується використовувати кілька посилань і елементів торкання. Однак деякі position
стилі z-index
можуть допомогти, якщо це буде потрібно.
Картка з розтягнутим посиланням
Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.
Іди кудисьМедіа-об’єкти не мають 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.
Іди кудисьСтовпці є position: relative
за замовчуванням, тому для клікабельних стовпців потрібен лише .stretched-link
клас за посиланням. Однак для розтягування зв’язку на ціле .row
потрібно .position-static
стовпець і .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.
Іди кудисьІдентифікація блоку, що містить
Якщо здається, що розтягнуте посилання не працює, причиною, ймовірно, є блок, що містить . Наступні властивості CSS зроблять елемент містким блоком:
- Значення
position
, відмінне відstatic
- A
transform
абоperspective
значення, відмінне відnone
will-change
Значенняtransform
або _perspective
- Значення
filter
, відмінне відnone
абоwill-change
значенняfilter
(працює лише у Firefox)
Картка з розтягнутими посиланнями
Деякий короткий приклад тексту, який буде побудований на заголовку картки та становить основну частину вмісту картки.
Розтягнуте посилання тут не працюватиме, оскільки position: relative
додається до посилання
Це розтягнуте посилання розповсюджуватиметься лише на p
тег -, оскільки до нього застосовано перетворення.