खिंचाव कड़ी

CSS मार्गेण नेस्टेड् लिङ्क् “stretching” कृत्वा किमपि HTML एलिमेण्ट् अथवा Bootstrap घटकं क्लिक् कर्तुं योग्यं कुर्वन्तु ।

तस्य समाविष्टं खण्डं छद्मतत्त्वद्वारा क्लिक् .stretched-linkकर्तुं शक्यं कर्तुं लिङ्क् मध्ये योजयन्तु । अधिकतया, अस्य अर्थः अस्ति यत् तया सह यत् तत्त्वं वर्गेण सह लिङ्क् भवति तत् क्लिक् कर्तुं शक्यते । कृपया ध्यानं दत्तव्यं यत् CSS कथं कार्यं करोति , अधिकांशसारणीतत्त्वैः सह मिश्रितुं न शक्यते ।::afterposition: relative;.stretched-linkposition.stretched-link

कार्ड्स् मध्ये position: relativeपूर्वनिर्धारितरूपेण Bootstrap मध्ये भवति, अतः अस्मिन् सन्दर्भे भवान् .stretched-linkअन्यत् HTML परिवर्तनं विना कार्ड् मध्ये लिङ्क् मध्ये वर्गं सुरक्षिततया योजयितुं शक्नोति ।

तानितलिङ्कैः सह बहुविधलिङ्कानि टैप् लक्ष्याणि च न अनुशंसितानि। तथापि, केचन 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अत्र योजितव्यं यत् लिङ्क् parent एलिमेण्ट् इत्यस्मात् बहिः न प्रसृतं न भवति ।

खिंचित लिंक के साथ कस्टम घटक

इदं कस्टम् घटकस्य कृते काचित् स्थानधारकसामग्री अस्ति । इदं काचित् वास्तविक-जगतः सामग्री कीदृशी भविष्यति इति अनुकरणं कर्तुं उद्दिष्टम् अस्ति, तथा च वयम् अत्र घटकं शरीरस्य आकारस्य च किञ्चित् दातुं तस्य उपयोगं कुर्मः ।

कुत्रचित् गच्छतु

<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
अ transformवा perspectiveमूल्यं अन्यत्none
वा इत्यस्य will-changeमूल्यम्transformperspective
(केवलं Firefox इत्यत्र कार्यं करोति) 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>