तानिएको लिङ्क

CSS मार्फत नेस्टेड लिङ्क "स्ट्रेच" गरेर कुनै पनि HTML तत्व वा बुटस्ट्र्याप कम्पोनेन्ट क्लिक गर्न मिल्ने बनाउनुहोस्।

एक छद्म तत्व मार्फत यसको समावेश ब्लक.stretched-link क्लिक गर्न योग्य बनाउन लिङ्कमा थप्नुहोस् । धेरै जसो केसहरूमा, यसको मतलब यो हो कि क्लाससँग लिङ्क समावेश भएको तत्व क्लिक गर्न योग्य छ। कृपया ध्यान दिनुहोस् कि CSS कसरी काम गर्दछ , धेरै तालिका तत्वहरूसँग मिलाउन सकिँदैन।::afterposition: relative;.stretched-linkposition.stretched-link

बुटस्ट्र्यापमा पूर्वनिर्धारित रूपमा कार्डहरू हुन्छन्, त्यसैले यस अवस्थामा तपाईंले कुनै पनि अन्य HTML परिवर्तनहरू बिना नै कार्डको लिङ्कमा क्लास position: relativeथप्न सक्नुहुन्छ ।.stretched-link

धेरै लिङ्कहरू र ट्याप लक्ष्यहरू विस्तारित लिङ्कहरूसँग सिफारिस गरिँदैन। यद्यपि, केहि positionर z-indexशैलीहरूले यो आवश्यक पर्दा मद्दत गर्न सक्छ।

तानिएको लिङ्कको साथ कार्ड

कार्डको शीर्षकमा निर्माण गर्न र कार्डको सामग्रीको ठूलो भाग बनाउनको लागि केही द्रुत उदाहरण पाठ।

कतै जानुहोस्

html

<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लिङ्कलाई अभिभावक तत्व बाहिर फैलिनबाट रोक्न यहाँ थप्नुपर्छ।

विस्तारित लिङ्कको साथ अनुकूलन घटक

यो अनुकूलन घटक को लागी केहि प्लेसहोल्डर सामग्री हो। यो केहि वास्तविक-विश्व सामग्री कस्तो देखिनेछ भनेर नक्कल गर्ने उद्देश्यले गरिएको छ, र हामी यसलाई यहाँ कम्पोनेन्टलाई थोरै शरीर र आकार दिन प्रयोग गर्दैछौं।

कतै जानुहोस्

html

<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>

विस्तारित लिङ्कको साथ स्तम्भहरू

यो अन्य अनुकूलन कम्पोनेन्टको लागि प्लेसहोल्डर सामग्रीको अर्को उदाहरण। यो केहि वास्तविक-विश्व सामग्री कस्तो देखिनेछ भनेर नक्कल गर्ने उद्देश्यले गरिएको छ, र हामी यसलाई यहाँ कम्पोनेन्टलाई थोरै शरीर र आकार दिन प्रयोग गर्दैछौं।

कतै जानुहोस्

html

<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मानtransformperspective
बाहेकको filterमान noneवा will-changeमान filter(Firefox मा मात्र काम गर्दछ)

तानिएका लिङ्कहरू भएको कार्ड

स्ट्रेच गरिएको लिङ्क यहाँ काम गर्दैन, किनभने position: relativeलिङ्कमा थपिएको छ

यो तानिएको लिङ्क -ट्यागमा मात्र फैलिनेछ p, किनभने यसमा रूपान्तरण लागू गरिएको छ।

html

<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>