खिंचाव वाला कड़ी

CSS के माध्यम स॑ नेस्टेड लिंक क॑ “स्ट्रेच” करी क॑ कोनो भी HTML तत्व या Bootstrap घटक क॑ क्लिक करलऽ जाय वाला बनाबै ।

.stretched-linkकोनो लिंक मे जोड़ू जे ओकर समाहित ब्लॉक::after के छद्म तत्व के माध्यम सं क्लिक करय योग्य बना सकय. अधिकांश मामला म॑ एकरऽ मतलब छै कि जेकरा म॑ क्लास के position: relative;साथ लिंक होय छै, ओकरा स॑ एक तत्व क्लिक करलऽ जाय सकै छै । .stretched-linkकृपया ध्यान दिअ जे CSS कोना positionकाज करैत अछि , .stretched-linkअधिकांश तालिका तत्वक संग मिश्रित नहि कएल जा सकैत अछि.

कार्ड मे 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
क transformया perspectiveमान के अलावा अन्य मानnone
या के एक will-changeमानtransformperspective
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>