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.

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

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

Obyek media ora duwe position: relativekanthi gawan, mula kita kudu nambahake .position-relativekene kanggo nyegah tautan saka njaba obyek media.

Media kanthi tautan sing dawa

Cras sit amet nibh libero, ing 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.

Menyang ngendi wae

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

Kolom minangka position: relativestandar, mula kolom sing bisa diklik mung mbutuhake .stretched-linkkelas ing tautan. Nanging, mulet link liwat kabeh .rowmbutuhake .position-staticing kolom lan .position-relativeing baris.

Kolom kanthi tautan sing dawa

Menyang ngendi wae

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

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.

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