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-linkvà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 ::afterphầ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-linklớp có thể nhấp được. Xin lưu ý rằng CSS positionhoạt động như thế nào , .stretched-linkkhông thể trộn lẫn với hầu hết các phần tử bảng.

Các thẻ có position: relativemặc định trong Bootstrap, vì vậy trong trường hợp này, bạn có thể thêm .stretched-linklớ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ố positionvà z-indexphong 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: relativetheo 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 positiongiá trị khác vớistatic
A transformhoặc perspectivegiá trị khácnone
Giá will-changetrị của transformhoặcperspective
Giá filtertrị khác nonehoặc will-changegiá trị của filter(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>