ప్రధాన కంటెంట్‌కు దాటవేయండి డాక్స్ నావిగేషన్‌కు దాటవేయండి
in English

విస్తరించిన లింక్

CSS ద్వారా సమూహ లింక్‌ను "సాగదీయడం" ద్వారా ఏదైనా HTML మూలకం లేదా బూట్‌స్ట్రాప్ కాంపోనెంట్‌ని క్లిక్ చేయగలిగేలా చేయండి.

నకిలీ మూలకం ద్వారా బ్లాక్‌ను.stretched-link క్లిక్ చేయగలిగేలా చేయడానికి లింక్‌కు జోడించండి . చాలా సందర్భాలలో, క్లాస్‌తో లింక్‌ను కలిగి ఉన్న మూలకం క్లిక్ చేయగలదని దీని అర్థం. దయచేసి CSS ఎలా పనిచేస్తుందో గమనించండి , చాలా పట్టిక మూలకాలతో కలపడం సాధ్యం కాదు.::afterposition: relative;.stretched-linkposition.stretched-link

కార్డ్‌లు డిఫాల్ట్‌గా బూట్‌స్ట్రాప్‌లో ఉంటాయి , కాబట్టి ఈ సందర్భంలో మీరు ఏ ఇతర HTML మార్పులు లేకుండా కార్డ్‌లోని లింక్‌కి తరగతిని position: relativeసురక్షితంగా జోడించవచ్చు ..stretched-link

విస్తరించిన లింక్‌లతో బహుళ లింక్‌లు మరియు ట్యాప్ లక్ష్యాలు సిఫార్సు చేయబడవు. అయితే, ఇది అవసరమైతే కొన్ని positionమరియు z-indexశైలులు సహాయపడతాయి.

Card image cap
విస్తరించిన లింక్‌తో కార్డ్

కార్డ్ టైటిల్‌పై రూపొందించడానికి మరియు కార్డ్ కంటెంట్‌లో ఎక్కువ భాగం చేయడానికి కొన్ని శీఘ్ర ఉదాహరణ టెక్స్ట్.

ఎక్కడికన్నా వెళ్ళు
<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

Generic placeholder image
విస్తరించిన లింక్‌తో అనుకూల భాగం

ఇది అనుకూల భాగం కోసం కొంత ప్లేస్‌హోల్డర్ కంటెంట్. ఇది కొంత వాస్తవ-ప్రపంచ కంటెంట్ ఎలా ఉంటుందో అనుకరించడానికి ఉద్దేశించబడింది మరియు మేము దానిని కొంత భాగం మరియు పరిమాణాన్ని అందించడానికి ఇక్కడ ఉపయోగిస్తున్నాము.

ఎక్కడికన్నా వెళ్ళు
<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>
Generic placeholder image
విస్తరించిన లింక్‌తో నిలువు వరుసలు

ఈ ఇతర అనుకూల భాగం కోసం ప్లేస్‌హోల్డర్ కంటెంట్ యొక్క మరొక ఉదాహరణ. ఇది కొంత వాస్తవ-ప్రపంచ కంటెంట్ ఎలా ఉంటుందో అనుకరించడానికి ఉద్దేశించబడింది మరియు మేము దానిని కొంత భాగం మరియు పరిమాణాన్ని అందించడానికి ఇక్కడ ఉపయోగిస్తున్నాము.

ఎక్కడికన్నా వెళ్ళు
<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ఫైర్‌ఫాక్స్‌లో మాత్రమే పని చేస్తుంది)
Card image cap
విస్తరించిన లింక్‌లతో కార్డ్

కార్డ్ టైటిల్‌పై రూపొందించడానికి మరియు కార్డ్ కంటెంట్‌లో ఎక్కువ భాగం చేయడానికి కొన్ని శీఘ్ర ఉదాహరణ టెక్స్ట్.

విస్తరించిన లింక్ ఇక్కడ పని చేయదు, ఎందుకంటే 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>