Link dowo

Nggawe unsur HTML utawa komponen Bootstrap sing bisa diklik kanthi "mulet" link bersarang liwat CSS.

Tambah .stretched-linkmenyang link kanggo nggawe blok sing ngemot bisa diklik liwat ::afterunsur pseudo. Umume kasus, iki tegese unsur position: relative;sing ngemot link karo .stretched-linkkelas bisa diklik. Wigati dimangerteni kepiye cara kerja CSSposition , .stretched-linkora bisa dicampur karo akeh unsur tabel.

Kertu duwe position: relativestandar ing Bootstrap, supaya ing kasus iki sampeyan bisa kanthi aman nambah .stretched-linkkelas menyang link ing kertu tanpa owah-owahan HTML liyane.

Tautan pirang-pirang lan target tunyuk ora disaranake nganggo tautan sing dawa. Nanging, sawetara positionlan z-indexgaya bisa mbantu yen dibutuhake.

Kertu kanthi tautan sing dawa

Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

Menyang ngendi wae

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>

Umume komponen khusus ora duwe position: relativestandar, mula kita kudu nambah ing .position-relativekene kanggo nyegah link saka njaba unsur induk.

Komponen khusus kanthi tautan sing dawa

Iki minangka sawetara isi placeholder kanggo komponen khusus. Iku dimaksudaké kanggo niru apa sawetara isi donya nyata bakal katon kaya, lan kita nggunakake kene kanggo menehi komponen dicokot saka awak lan ukuran.

Menyang ngendi wae

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>

Kolom kanthi tautan sing dawa

Conto liyane isi placeholder kanggo komponen khusus liyane iki. Iku dimaksudaké kanggo niru apa sawetara isi donya nyata bakal katon kaya, lan kita nggunakake kene kanggo menehi komponen dicokot saka awak lan ukuran.

Menyang ngendi wae

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>

Ngenali blok sing ngemot

Yen link sing diwutahake ora bisa digunakake, blok sing ana bisa uga dadi sababe. Properti CSS ing ngisor iki bakal nggawe unsur minangka blok sing ngemot:

Nilai positionliyane sakastatic
A transformutawa perspectiveNilai liyane sakanone
Nilai will-changesaka transformutawaperspective
Nilai filterliyane saka noneutawa will-changenilai filter(mung dianggo ing Firefox)

Kertu karo pranala dowo

Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

Link dowo ora bakal bisa ing kene, amarga position: relativeditambahake menyang link

Link dowo iki mung bakal nyebar liwat p-tag, amarga transformasi ditrapake kanggo.

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>