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.

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

<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 mempunyai position: relativesecara lalai, jadi kita perlu menambah di .position-relativesini untuk mengelakkan pautan daripada meregang di luar objek media.

Media dengan pautan terbentang

Cras duduk amet nibh libero, dalam 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 dalam 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>

Lajur adalah position: relativesecara lalai, jadi lajur boleh klik hanya memerlukan .stretched-linkkelas pada pautan. Walau bagaimanapun, meregangkan pautan pada keseluruhannya .rowmemerlukan .position-staticpada lajur dan .position-relativepada baris.

Lajur dengan pautan terbentang

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>

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.

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