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. Harap dicatat mengingat cara kerja CSSposition , .stretched-linktidak dapat dicampur dengan sebagian besar elemen tabel.

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

Ini adalah beberapa konten placeholder untuk objek media. Ini dimaksudkan untuk meniru seperti apa tampilan beberapa konten dunia nyata, dan kami menggunakannya di sini untuk memberi komponen sedikit tubuh dan ukuran.

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>This is some placeholder content for the media object. 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>

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

Contoh lain dari konten placeholder untuk komponen kustom lainnya ini. Ini dimaksudkan untuk meniru seperti apa tampilan beberapa konten dunia nyata, dan kami menggunakannya di sini untuk memberi komponen sedikit tubuh dan ukuran.

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

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>