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. Xin lưu ý rằng CSS position
hoạt động như thế nào , .stretched-link
không thể trộn lẫn với hầu hết các phần tử bảng.
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 đó<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>
Hầu hết các thành phần tùy chỉnh 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 thành phần mẹ.
Thành phần tùy chỉnh với liên kết kéo dài
Đây là một số nội dung trình giữ chỗ cho thành phần tùy chỉnh. Nó nhằm mục đích bắt chước một số nội dung trong thế giới thực sẽ trông như thế nào và chúng tôi đang sử dụng nó ở đây để cung cấp cho thành phần một chút về nội dung và kích thước.
Đi đâu đó<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>
Các cột có liên kết kéo dài
Một ví dụ khác của nội dung giữ chỗ cho thành phần tùy chỉnh khác này. Nó nhằm mục đích bắt chước một số nội dung trong thế giới thực sẽ trông như thế nào và chúng tôi đang sử dụng nó ở đây để cung cấp cho thành phần một chút về nội dung và kích thước.
Đi đâu đó<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>
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ể 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ó.
<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>