Girêdana dirêjkirî
Her hêmanek HTML-ê an pêkhatek Bootstrap-ê ku bi "rêvekirina" girêdanek hêlînkirî bi CSS-ê ve were klîk kirin, bikin.
Zencîreyek zêde .stretched-link
bikin da ku bloka wê ya tê de bi riya ::after
hêmanek pseudo ve were klîk kirin. Di pir rewşan de, ev tê vê wateyê ku hêmanek pê re position: relative;
girêdanek bi .stretched-link
polê re tê klîk kirin. Ji kerema xwe bala xwe bidin ku CSS çawa position
dixebite , .stretched-link
nikare bi piraniya hêmanên tabloyê re were tevlihev kirin.
Kartên ji position: relative
hêla xwerû ve di Bootstrap-ê de hene, ji ber vê yekê hûn dikarin bi ewlehî .stretched-link
polê li ser girêdanek di qertê de bêyî ku guhartinên din ên HTML-ê lê zêde bikin.
Gelek girêdan û armancên tap bi girêdanên dirêjkirî nayê pêşniyar kirin. Lêbelê, hin position
û z-index
şêwaz dikarin bibin alîkar ku ev hewce be.
Karta bi girêdana dirêjkirî
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Biçe cihekî<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>
Piraniya hêmanên xwerû ji position: relative
hêla xwerû ve tune ne, ji ber vê yekê em hewce ne ku li vir lê zêde bikin .position-relative
da ku rê li ber dirêjkirina girêdanê li derveyî hêmana dêûbav bigire.
Parçeyek xwerû ya bi girêdana dirêjkirî
Ev ji bo pêkhateya xwerû hin naverok cîhgir e. Mebest ew e ku meriv çawa hin naveroka cîhana rastîn bişopîne, û em wê li vir bikar tînin da ku beşê hinekî laş û mezinahî bidin.
Biçe cihekî<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>
Stûnên bi girêdana dirêjkirî
Nimûneyek din a naveroka cîhê ji bo vê hêmana xwerû ya din. Mebest ew e ku meriv çawa hin naveroka cîhana rastîn bişopîne, û em wê li vir bikar tînin da ku beşê hinekî laş û mezinahî bidin.
Biçe cihekî<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>
Naskirina bloka têde
Ger girêdana dirêjkirî nexebite, dibe ku bloka tê de bibe sedem. Taybetmendiyên CSS-ê yên jêrîn dê hêmanek bloka têde bikin:
- Nirxek
position
ji bilîstatic
- A
transform
anperspective
nirxa din ji bilînone
- Nirxa an
will-change
_transform
perspective
- Nirxek
filter
ji bilînone
anwill-change
nirxekfilter
(tenê li ser Firefox-ê dixebite)
Karta bi girêdanên dirêjkirî
Hin nivîsek mînakek bilez a ku li ser sernavê qertê ava bike û piraniya naveroka qertê pêk bîne.
Zencîreya dirêjkirî dê li vir nexebite, ji ber ku position: relative
li zencîreyê hatî zêdekirin
Ev girêdana dirêjkirî dê tenê li ser p
-tagê belav bibe, ji ber ku veguherînek jê re tê sepandin.
<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>