Link dowo
Nggawe unsur HTML utawa komponen Bootstrap sing bisa diklik kanthi "mulet" link bersarang liwat CSS.
Tambah .stretched-link
menyang link kanggo nggawe blok sing ngemot bisa diklik liwat ::after
unsur pseudo. Umume kasus, iki tegese unsur position: relative;
sing ngemot link karo .stretched-link
kelas bisa diklik. Wigati dimangerteni kepiye cara kerja CSSposition
, .stretched-link
ora bisa dicampur karo akeh unsur tabel.
Kertu duwe position: relative
standar ing Bootstrap, supaya ing kasus iki sampeyan bisa kanthi aman nambah .stretched-link
kelas menyang link ing kertu tanpa owah-owahan HTML liyane.
Tautan pirang-pirang lan target tunyuk ora disaranake nganggo tautan sing dawa. Nanging, sawetara position
lan z-index
gaya 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: relative
kanthi gawan, mula kita kudu nambahake .position-relative
kene kanggo nyegah tautan saka njaba obyek media.
Media kanthi tautan sing dawa
Iki minangka sawetara isi placeholder kanggo obyek media. 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<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>This is some placeholder content for the media object. 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 minangka position: relative
standar, mula kolom sing bisa diklik mung mbutuhake .stretched-link
kelas ing tautan. Nanging, mulet link liwat kabeh .row
mbutuhake .position-static
ing kolom lan .position-relative
ing baris.
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<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>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
position
liyane sakastatic
- A
transform
utawaperspective
Nilai liyane sakanone
- Nilai
will-change
sakatransform
utawaperspective
- Nilai
filter
liyane sakanone
utawawill-change
nilaifilter
(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: relative
ditambahake 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>