విస్తరించిన లింక్
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="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>
నిలువు position: relative
వరుసలు డిఫాల్ట్గా ఉంటాయి, కాబట్టి క్లిక్ చేయగల నిలువు వరుసలకు లింక్లోని .stretched-link
తరగతి మాత్రమే అవసరం. అయితే, మొత్తం మీద లింక్ను సాగదీయడానికి నిలువు వరుసలో మరియు అడ్డు వరుసలో .row
అవసరం ..position-static
.position-relative
విస్తరించిన లింక్తో నిలువు వరుసలు
ఈ ఇతర అనుకూల భాగం కోసం ప్లేస్హోల్డర్ కంటెంట్ యొక్క మరొక ఉదాహరణ. ఇది కొంత వాస్తవ-ప్రపంచ కంటెంట్ ఎలా ఉంటుందో అనుకరించడానికి ఉద్దేశించబడింది మరియు మేము దానిని కొంత భాగం మరియు పరిమాణాన్ని అందించడానికి ఇక్కడ ఉపయోగిస్తున్నాము.
ఎక్కడికన్నా వెళ్ళు<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>
కలిగి ఉన్న బ్లాక్ను గుర్తించడం
విస్తరించిన లింక్ పని చేయనట్లయితే, కలిగి ఉన్న బ్లాక్ బహుశా కారణం కావచ్చు. కింది 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>