Pautan terbentang

Jadikan mana-mana elemen HTML atau komponen Bootstrap boleh diklik dengan "meregangkan" pautan bersarang melalui CSS.

Tambahkan .stretched-linkpada pautan untuk menjadikan blok yang mengandunginya boleh diklik melalui ::afterelemen pseudo. Dalam kebanyakan kes, ini bermakna elemen position: relative;yang mengandungi pautan dengan .stretched-linkkelas boleh diklik. Sila ambil perhatian memandangkan bagaimana CSS positionberfungsi , .stretched-linktidak boleh dicampur dengan kebanyakan elemen jadual.

Kad mempunyai position: relativesecara lalai dalam Bootstrap, jadi dalam kes ini anda boleh menambah .stretched-linkkelas dengan selamat pada pautan dalam kad tanpa sebarang perubahan HTML lain.

Berbilang pautan dan sasaran ketik tidak disyorkan dengan pautan terbentang. Walau bagaimanapun, beberapa gaya positiondan z-indexgaya boleh membantu sekiranya ini diperlukan.

Kad dengan pautan terbentang

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

Pergi ke suatu tempat

html

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

Kebanyakan komponen tersuai tidak mempunyai position: relativesecara lalai, jadi kami perlu menambah di .position-relativesini untuk mengelakkan pautan daripada meregang di luar elemen induk.

Komponen tersuai dengan pautan terbentang

Ini ialah beberapa kandungan pemegang tempat untuk komponen tersuai. Ia bertujuan untuk meniru rupa sesetengah kandungan dunia sebenar, dan kami menggunakannya di sini untuk memberikan komponen itu sedikit badan dan saiz.

Pergi ke suatu tempat

html

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

Lajur dengan pautan terbentang

Satu lagi contoh kandungan pemegang tempat untuk komponen tersuai yang lain ini. Ia bertujuan untuk meniru rupa sesetengah kandungan dunia sebenar, dan kami menggunakannya di sini untuk memberikan komponen itu sedikit badan dan saiz.

Pergi ke suatu tempat

html

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

Mengenal pasti blok yang mengandungi

Jika pautan terbentang nampaknya tidak berfungsi, blok yang mengandungi mungkin akan menjadi puncanya. Sifat CSS berikut akan menjadikan elemen sebagai blok yang mengandungi:

Nilai positionselain daripadastatic
A transformatau perspectivenilai selain daripadanone
Nilai will-changedaripada transformatauperspective
Nilai filterselain daripada noneatau will-changenilai filter(hanya berfungsi pada Firefox)

Kad dengan pautan terbentang

Beberapa teks contoh pantas untuk dibina pada tajuk kad dan membentuk sebahagian besar kandungan kad.

Pautan terbentang tidak akan berfungsi di sini, kerana position: relativeditambahkan pada pautan

Pautan terbentang ini hanya akan tersebar di atas pteg, kerana perubahan digunakan padanya.

html

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