Nexus extentus
Fac quodlibet elementum HTML vel Bootstrap componente clickable per "extendere" nexum nestum per CSS.
Addere .stretched-link
ad nexum ut suum claudat strepitabile per ::after
pseudo elementum. Pleraque hoc significat elementum cum position: relative;
eo quod nexum cum .stretched-link
genere strepitabile continet. Nota quaeso quomodo opera CSSposition
, .stretched-link
elementis plurimis tabulis misceri non possunt.
Chartas per defaltam in Bootstrap habent, ut hoc in casu classem ad nexum in charta sine HTML mutationibus aliis position: relative
addere tuto possis ..stretched-link
Plures nexus et scuta sonum non commendantur cum nexibus extentis. Sed nonnulla position
et z-index
genera iuvare possunt si hoc requiri.
Card cum extenta link
Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.
Ite somewhere<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>
Pleraque consuetudo partium per defaltam non habent position: relative
, ideo hic addere oportet .position-relative
ne nexus extra elementum parentis tendat.
Custom component with extento link
Hic est locus quidam contentus pro consuetudine componentium. Intentum est ad imitandum quod aliqua contenta rerum realium mundi similis videretur, et hic utimur eo ut aliquid corporis et quantitatis componat.
Ite somewhere<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>
Columnae extentae
Alterum instantia placeholder contenti in hac alia consuetudine componentium. Intentum est ad imitandum quod aliqua contenta rerum realium mundi similis videretur, et hic utimur eo ut aliquid corporis et quantitatis componat.
Ite somewhere<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>
Distinguendis in quibus obstructionum
Si ligamen extensum laborare non videtur, clausus continens causa verisimiliter erit. Proprietates sequentes CSS elementum continens scandalum efficiet:
- Valorem
position
quamstatic
- A
transform
velperspective
pretii quamnone
will-change
Valoremtransform
vel _perspective
- A
filter
valorem aliud quamnone
velwill-change
valorem ipsiusfilter
(in Firefox tantum operatur)
Card extenta nexus
Exemplar aliquod velox exemplum quod in titulo chartae aedificatur et molem contenti chartae componunt.
Vinculum extensum hic non operatur, quia position: relative
ad nexum additur
Haec nexus extenta solum super p
-tag dilatabitur, quia transformatio applicatur.
<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>