Liên kết kéo dài
Làm cho bất kỳ phần tử HTML hoặc thành phần Bootstrap nào có thể nhấp được bằng cách “kéo dài” một liên kết lồng nhau qua CSS.
Thêm .stretched-link
vào một liên kết để làm cho khối chứa của nó có thể nhấp được thông qua một ::after
phần tử giả. Trong hầu hết các trường hợp, điều này có nghĩa là một phần tử có position: relative;
chứa liên kết với .stretched-link
lớp có thể nhấp được.
Các thẻ có position: relative
mặc định trong Bootstrap, vì vậy trong trường hợp này, bạn có thể thêm .stretched-link
lớp vào liên kết trong thẻ một cách an toàn mà không cần bất kỳ thay đổi HTML nào khác.
Nhiều liên kết và mục tiêu nhấn không được khuyến nghị với các liên kết kéo dài. Tuy nhiên, một số position
và z-index
phong cách có thể giúp ích nếu điều này được yêu cầu.
Thẻ có liên kết kéo dài
Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
Đi đâu đóĐối tượng media không có position: relative
theo mặc định, vì vậy chúng ta cần thêm vào .position-relative
đây để ngăn liên kết kéo dài ra bên ngoài đối tượng media.
Phương tiện có liên kết kéo dài
Cras ngồi amet nibh libero, trong 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 ở faucibus.
Đi đâu đóCác cột là position: relative
theo mặc định, vì vậy các cột có thể nhấp chỉ yêu cầu .stretched-link
lớp trên một liên kết. Tuy nhiên, kéo dài một liên kết trên toàn bộ .row
yêu cầu .position-static
trên cột và .position-relative
trên hàng.
Các cột có liên kết kéo dài
Cras ngồi amet nibh libero, trong 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 ở faucibus.
Đi đâu đóXác định khối chứa
Nếu liên kết bị kéo căng dường như không hoạt động, khối chứa có thể sẽ là nguyên nhân. Các thuộc tính CSS sau sẽ làm cho một phần tử trở thành khối chứa:
- Một
position
giá trị khác vớistatic
- A
transform
hoặcperspective
giá trị khácnone
- Giá
will-change
trị củatransform
hoặcperspective
- Giá
filter
trị khácnone
hoặcwill-change
giá trị củafilter
(chỉ hoạt động trên Firefox)
Thẻ có các liên kết kéo dài
Một số văn bản ví dụ nhanh để xây dựng trên tiêu đề thẻ và tạo nên phần lớn nội dung của thẻ.
Liên kết kéo dài sẽ không hoạt động ở đây, vì position: relative
được thêm vào liên kết
Liên kết kéo dài này sẽ chỉ được lan truyền trên p
-tag, bởi vì một biến đổi được áp dụng cho nó.