तानिएको लिङ्क
CSS मार्फत नेस्टेड लिङ्क "स्ट्रेच" गरेर कुनै पनि HTML तत्व वा बुटस्ट्र्याप कम्पोनेन्ट क्लिक गर्न मिल्ने बनाउनुहोस्।
एक छद्म तत्व मार्फत यसको समावेश ब्लक.stretched-link
क्लिक गर्न योग्य बनाउन लिङ्कमा थप्नुहोस् । धेरै जसो केसहरूमा, यसको मतलब यो हो कि क्लासको लिङ्क समावेश भएको तत्व क्लिक गर्न योग्य छ।::after
position: relative;
.stretched-link
बुटस्ट्र्यापमा पूर्वनिर्धारित रूपमा कार्डहरू हुन्छन्, त्यसैले यस अवस्थामा तपाईंले कुनै पनि अन्य HTML परिवर्तनहरू बिना नै कार्डको लिङ्कमा क्लास position: relative
थप्न सक्नुहुन्छ ।.stretched-link
धेरै लिङ्कहरू र ट्याप लक्ष्यहरू विस्तारित लिङ्कहरूसँग सिफारिस गरिँदैन। यद्यपि, केहि position
र z-index
शैलीहरूले यो आवश्यक पर्दा मद्दत गर्न सक्छ।
तानिएको लिङ्कको साथ कार्ड
कार्डको शीर्षकमा निर्माण गर्न र कार्डको सामग्रीको ठूलो भाग बनाउनको लागि केही द्रुत उदाहरण पाठ।
कतै जानुहोस्मिडिया वस्तुहरू पूर्वनिर्धारित रूपमा हुँदैन position: relative
, त्यसैले हामीले .position-relative
लिङ्कलाई मिडिया वस्तु बाहिर फैलिनबाट रोक्नको लागि यहाँ थप्नुपर्छ।
विस्तारित लिङ्कको साथ मिडिया
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis। Fusce condimentum nunc ac nisi vulputate fringilla। डोनेक लासिनिया कन्गु फेलिस इन फौसिबस।
कतै जानुहोस्स्तम्भहरू पूर्वनिर्धारित रूपमा हुन्छन् , त्यसैले क्लिक गर्न मिल्ने स्तम्भहरूलाई लिङ्कमा position: relative
मात्र वर्ग चाहिन्छ । यद्यपि, स्तम्भ र पङ्क्तिमा .stretched-link
पूरै लिङ्क स्ट्रेच गर्न .row
आवश्यक छ।.position-static
.position-relative
विस्तारित लिङ्कको साथ स्तम्भहरू
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis। Fusce condimentum nunc ac nisi vulputate fringilla। डोनेक लासिनिया कन्गु फेलिस इन फौसिबस।
कतै जानुहोस्समावेश ब्लक पहिचान गर्दै
यदि तानिएको लिङ्कले काम गरिरहेको जस्तो लाग्दैन भने, समावेश ब्लक सम्भवतः कारण हुनेछ। निम्न CSS गुणहरूले एउटा तत्व समावेश ब्लक बनाउनेछ:
- बाहेकको
position
मूल्यstatic
- A
transform
वाperspective
बाहेक अन्य मानnone
- वा को एक
will-change
मानtransform
perspective
- बाहेकको
filter
मानnone
वाwill-change
मानfilter
(फायरफक्समा मात्र काम गर्दछ)
तानिएका लिङ्कहरू भएको कार्ड
कार्डको शीर्षकमा निर्माण गर्न र कार्डको सामग्रीको ठूलो भाग बनाउनको लागि केही द्रुत उदाहरण पाठ।
स्ट्रेच गरिएको लिङ्क यहाँ काम गर्दैन, किनभने position: relative
लिङ्कमा थपिएको छ
यो तानिएको लिङ्क -ट्यागमा मात्र फैलिनेछ p
, किनभने यसमा रूपान्तरण लागू गरिएको छ।