విస్తరించిన లింక్
CSS ద్వారా సమూహ లింక్ను "సాగదీయడం" ద్వారా ఏదైనా HTML మూలకం లేదా బూట్స్ట్రాప్ కాంపోనెంట్ని క్లిక్ చేయగలిగేలా చేయండి.
నకిలీ మూలకం ద్వారా బ్లాక్ను.stretched-link
క్లిక్ చేయగలిగేలా చేయడానికి లింక్కు జోడించండి . చాలా సందర్భాలలో, క్లాస్తో లింక్ను కలిగి ఉన్న మూలకం క్లిక్ చేయగలదని దీని అర్థం. దయచేసి CSS ఎలా పనిచేస్తుందో గమనించండి , చాలా పట్టిక మూలకాలతో కలపడం సాధ్యం కాదు.::after
position: relative;
.stretched-link
position
.stretched-link
కార్డ్లు డిఫాల్ట్గా బూట్స్ట్రాప్లో ఉంటాయి , కాబట్టి ఈ సందర్భంలో మీరు ఏ ఇతర HTML మార్పులు లేకుండా కార్డ్లోని లింక్కి తరగతిని position: relative
సురక్షితంగా జోడించవచ్చు ..stretched-link
విస్తరించిన లింక్లతో బహుళ లింక్లు మరియు ట్యాప్ లక్ష్యాలు సిఫార్సు చేయబడవు. అయితే, ఇది అవసరమైతే కొన్ని position
మరియు z-index
శైలులు సహాయపడతాయి.
విస్తరించిన లింక్తో కార్డ్
కార్డ్ టైటిల్పై రూపొందించడానికి మరియు కార్డ్ కంటెంట్లో ఎక్కువ భాగం చేయడానికి కొన్ని శీఘ్ర ఉదాహరణ టెక్స్ట్.
ఎక్కడికన్నా వెళ్ళు<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>
చాలా అనుకూల భాగాలు డిఫాల్ట్గా లేవు, కాబట్టి పేరెంట్ ఎలిమెంట్ వెలుపల లింక్ని సాగదీయకుండా నిరోధించడానికి position: relative
మేము ఇక్కడ జోడించాలి ..position-relative
విస్తరించిన లింక్తో అనుకూల భాగం
ఇది అనుకూల భాగం కోసం కొంత ప్లేస్హోల్డర్ కంటెంట్. ఇది కొంత వాస్తవ-ప్రపంచ కంటెంట్ ఎలా ఉంటుందో అనుకరించడానికి ఉద్దేశించబడింది మరియు మేము దానిని కొంత భాగం మరియు పరిమాణాన్ని అందించడానికి ఇక్కడ ఉపయోగిస్తున్నాము.
ఎక్కడికన్నా వెళ్ళు<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>
విస్తరించిన లింక్తో నిలువు వరుసలు
ఈ ఇతర అనుకూల భాగం కోసం ప్లేస్హోల్డర్ కంటెంట్ యొక్క మరొక ఉదాహరణ. ఇది కొంత వాస్తవ-ప్రపంచ కంటెంట్ ఎలా ఉంటుందో అనుకరించడానికి ఉద్దేశించబడింది మరియు మేము దానిని కొంత భాగం మరియు పరిమాణాన్ని అందించడానికి ఇక్కడ ఉపయోగిస్తున్నాము.
ఎక్కడికన్నా వెళ్ళు<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>
కలిగి ఉన్న బ్లాక్ను గుర్తించడం
విస్తరించిన లింక్ పని చేయనట్లయితే, కలిగి ఉన్న బ్లాక్ బహుశా కారణం కావచ్చు. కింది CSS లక్షణాలు ఒక మూలకాన్ని కలిగి ఉన్న బ్లాక్గా చేస్తాయి:
- కాకుండా ఒక
position
విలువstatic
- A
transform
లేదాperspective
విలువ కాకుండాnone
will-change
విలువtransform
లేదా _perspective
filter
విలువ కంటే ఇతర విలువnone
లేదాwill-change
విలువ (filter
ఫైర్ఫాక్స్లో మాత్రమే పని చేస్తుంది)
విస్తరించిన లింక్లతో కార్డ్
కార్డ్ టైటిల్పై రూపొందించడానికి మరియు కార్డ్ కంటెంట్లో ఎక్కువ భాగం చేయడానికి కొన్ని శీఘ్ర ఉదాహరణ టెక్స్ట్.
విస్తరించిన లింక్ ఇక్కడ పని చేయదు, ఎందుకంటే position: relative
లింక్కి జోడించబడింది
ఈ స్ట్రెచ్డ్ లింక్ -ట్యాగ్పై మాత్రమే స్ప్రెడ్ అవుతుంది p
, ఎందుకంటే దానికి ట్రాన్స్ఫార్మ్ వర్తించబడుతుంది.
<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>