तानिएको लिङ्क
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="media position-relative">
<img src="..." class="mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Media with stretched link</h5>
<p>This is some placeholder content for the media object. 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>
स्तम्भहरू पूर्वनिर्धारित रूपमा हुन्छन् , त्यसैले क्लिक गर्न मिल्ने स्तम्भहरूलाई लिङ्कमा position: relative
मात्र वर्ग चाहिन्छ । यद्यपि, स्तम्भ र पङ्क्तिमा .stretched-link
पूरै लिङ्क स्ट्रेच गर्न .row
आवश्यक छ।.position-static
.position-relative
विस्तारित लिङ्कको साथ स्तम्भहरू
यो अन्य अनुकूलन कम्पोनेन्टको लागि प्लेसहोल्डर सामग्रीको अर्को उदाहरण। यो केहि वास्तविक-विश्व सामग्री कस्तो देखिनेछ भनेर नक्कल गर्ने उद्देश्यले गरिएको छ, र हामी यसलाई यहाँ कम्पोनेन्टलाई थोरै शरीर र आकार दिन प्रयोग गर्दैछौं।
कतै जानुहोस्<div class="row no-gutters 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 position-static p-4 pl-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>