तानिएको लिङ्क
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="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
- 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>