Source

کھینچا ہوا لنک

کسی بھی HTML عنصر یا بوٹسٹریپ جزو کو CSS کے ذریعے نیسٹڈ لنک کو "اسٹریچنگ" کرکے قابل کلک بنائیں۔

سیوڈو عنصر کے ذریعے اس کے شامل بلاک کو کلک کرنے کے قابل .stretched-linkبنانے کے لیے ایک لنک میں شامل کریں ۔ زیادہ تر معاملات میں، اس کا مطلب یہ ہے کہ ایک عنصر جس کے ساتھ کلاس کے ساتھ ایک لنک ہوتا ہے کلک کے قابل ہے۔::afterposition: relative;.stretched-link

position: relativeبوٹسٹریپ میں کارڈز بذریعہ ڈیفالٹ ہوتے ہیں، لہٰذا اس صورت میں آپ .stretched-linkکسی بھی HTML تبدیلیوں کے بغیر کارڈ کے لنک میں کلاس کو محفوظ طریقے سے شامل کر سکتے ہیں۔

کھینچے ہوئے لنکس کے ساتھ متعدد لنکس اور ٹیپ اہداف کی سفارش نہیں کی جاتی ہے۔ تاہم، کچھ positionاور z-indexطرزیں اس کی ضرورت پڑنے پر مدد کر سکتی ہیں۔

Card image cap
کھینچے ہوئے لنک کے ساتھ کارڈ

کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔

کہیں جاؤ
<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لنک کو میڈیا آبجیکٹ کے باہر پھیلنے سے روکنے کے لیے یہاں شامل کرنے کی ضرورت ہے۔

Generic placeholder image
پھیلا ہوا لنک والا میڈیا

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. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔

کہیں جاؤ
<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>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. Donec lacinia congue felis in faucibus.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

کالم بطور position: relativeڈیفالٹ ہوتے ہیں، اس لیے کلک کے قابل کالموں کو صرف .stretched-linkلنک پر کلاس کی ضرورت ہوتی ہے۔ تاہم، ایک لنک کو پورے پر پھیلانے کے لیے کالم اور قطار .rowکی ضرورت ہوتی ہے ۔.position-static.position-relative

Generic placeholder image
کھینچے ہوئے لنک کے ساتھ کالم

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. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔

کہیں جاؤ
<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>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. Donec lacinia congue felis in faucibus.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

پر مشتمل بلاک کی شناخت

اگر پھیلا ہوا لنک کام نہیں کرتا ہے، تو اس کی وجہ ممکنہ طور پر مشتمل بلاک ہو گا۔ درج ذیل سی ایس ایس کی خصوصیات ایک عنصر پر مشتمل بلاک بنائیں گی۔

  • کے علاوہ ایک positionقدرstatic
  • A transformیا perspectiveاس کے علاوہ قدرnone
  • یا کی will-changeقدرtransformperspective
  • filterاس کے علاوہ ایک قدر noneیا will-changeقدر filter(صرف فائر فاکس پر کام کرتی ہے)
Card image cap
کھینچے ہوئے لنکس والا کارڈ

کارڈ کے عنوان پر بنانے اور کارڈ کے مواد کا بڑا حصہ بنانے کے لیے کچھ فوری مثال کے متن۔

اسٹریچڈ لنک یہاں کام نہیں کرے گا، کیونکہ 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>