Pautan terbentang
Jadikan mana-mana elemen HTML atau komponen Bootstrap boleh diklik dengan "meregangkan" pautan bersarang melalui CSS.
Tambahkan .stretched-link
pada pautan untuk menjadikan blok yang mengandunginya boleh diklik melalui ::after
elemen pseudo. Dalam kebanyakan kes, ini bermakna elemen position: relative;
yang mengandungi pautan dengan .stretched-link
kelas boleh diklik. Sila ambil perhatian memandangkan bagaimana CSS position
berfungsi , .stretched-link
tidak boleh dicampur dengan kebanyakan elemen jadual.
Kad mempunyai position: relative
secara lalai dalam Bootstrap, jadi dalam kes ini anda boleh menambah .stretched-link
kelas 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 position
dan z-index
gaya 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<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: relative
secara lalai, jadi kami perlu menambah di .position-relative
sini 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<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<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
position
selain daripadastatic
- A
transform
atauperspective
nilai selain daripadanone
- Nilai
will-change
daripadatransform
atauperspective
- Nilai
filter
selain daripadanone
atauwill-change
nilaifilter
(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: relative
ditambahkan pada pautan
Pautan terbentang ini hanya akan tersebar di atas p
teg, kerana perubahan digunakan 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>