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.

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>

Đối tượng media 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 đố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 đó

<div class="media position-relative">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media with stretched link</h5>
    <p>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.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

Các cột là position: relativetheo mặc định, vì vậy các cột có thể nhấp chỉ yêu cầu .stretched-linklớ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ộ .rowyêu cầu .position-statictrên cột và .position-relativetrên hàng.

Các cột có liên kết kéo dài

Đi đâu đó

<div class="row no-gutters 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 position-static p-4 pl-md-0">
    <h5 class="mt-0">Columns with stretched link</h5>
    <p>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.</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ể 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 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>