खिंचाव कड़ी
CSS मार्गेण नेस्टेड् लिङ्क् “stretching” कृत्वा किमपि HTML एलिमेण्ट् अथवा Bootstrap घटकं क्लिक् कर्तुं योग्यं कुर्वन्तु ।
तस्य समाविष्टं खण्डं छद्मतत्त्वद्वारा क्लिक् .stretched-link
कर्तुं योग्यं कर्तुं लिङ्क् मध्ये योजयन्तु । अधिकतया, अस्य अर्थः अस्ति यत् तया सह यत् तत्त्वं वर्गेण सह लिङ्क् अस्ति तत् क्लिक् कर्तुं शक्यते । कृपया ध्यानं दत्तव्यं यत् CSS कथं कार्यं करोति , अधिकांशसारणीतत्त्वैः सह मिश्रितुं न शक्यते ।::after
position: relative;
.stretched-link
position
.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
मूल्यम्transform
perspective
- (केवलं 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>