Tautan membentang

Jadikan elemen HTML atau komponen Bootstrap apa pun dapat diklik dengan "meregangkan" tautan bersarang melalui CSS.

Tambahkan .stretched-linkke tautan untuk membuat blok yang memuatnya dapat diklik melalui ::afterelemen semu. Dalam kebanyakan kasus, ini berarti bahwa elemen dengan position: relative;yang berisi tautan dengan .stretched-linkkelas dapat diklik.

Kartu memiliki position: relativesecara default di Bootstrap, jadi dalam hal ini Anda dapat dengan aman menambahkan .stretched-linkkelas ke tautan di kartu tanpa perubahan HTML lainnya.

Beberapa tautan dan target ketuk tidak disarankan dengan tautan yang direntangkan. Namun, beberapa positiondan z-indexgaya dapat membantu jika ini diperlukan.

Kartu dengan tautan yang diregangkan

Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.

Pergi ke suatu tempat

<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>

Objek media tidak memiliki position: relativesecara default, jadi kita perlu menambahkan di .position-relativesini untuk mencegah tautan merentang di luar objek media.

Media dengan tautan yang diregangkan

Cras sit amet nibh libero, di gravida nulla. Nulla vel metus scelerisque ante solicitudin. Cras purus odio, vestibulum di vulputate di, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis di faucibus.

Pergi ke suatu tempat

<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>

Kolom secara position: relativedefault, jadi kolom yang dapat diklik hanya memerlukan .stretched-linkkelas pada tautan. Namun, merentangkan tautan ke keseluruhan .rowmembutuhkan .position-statickolom dan .position-relativebaris.

Kolom dengan tautan yang diregangkan

Pergi ke suatu tempat

<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>

Mengidentifikasi blok yang mengandung

Jika tautan yang diregangkan tampaknya tidak berfungsi, blok yang memuatnya mungkin akan menjadi penyebabnya. Properti CSS berikut akan membuat elemen menjadi blok yang berisi:

Nilai positionselainstatic
A transformatau perspectivenilai selainnone
Sebuah will-changenilai transformorperspective
Nilai filterselain noneatau will-changenilai filter(hanya berfungsi di Firefox)

Kartu dengan tautan yang direntangkan

Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.

Tautan yang diregangkan tidak akan berfungsi di sini, karena position: relativeditambahkan ke tautan

Tautan yang diregangkan ini hanya akan disebarkan di atas ptag -, karena transformasi diterapkan padanya.

<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>