کھینچا ہوا لنک
کسی بھی HTML عنصر یا بوٹسٹریپ جزو کو CSS کے ذریعے نیسٹڈ لنک کو "اسٹریچ" کرکے قابل کلک بنائیں۔
سیوڈو عنصر کے ذریعے اس کے شامل بلاک کو کلک کرنے کے قابل .stretched-link
بنانے کے لیے ایک لنک میں شامل کریں ۔ زیادہ تر معاملات میں، اس کا مطلب یہ ہے کہ ایک عنصر جس کے ساتھ کلاس کے ساتھ ایک لنک ہوتا ہے کلک کے قابل ہے۔ براہ کرم نوٹ کریں کہ CSS کیسے کام کرتا ہے ، زیادہ تر ٹیبل عناصر کے ساتھ نہیں ملایا جا سکتا۔::after
position: relative;
.stretched-link
position
.stretched-link
position: relative
بوٹسٹریپ میں کارڈز بذریعہ ڈیفالٹ ہوتے ہیں، لہٰذا اس صورت میں آپ .stretched-link
کسی بھی HTML تبدیلیوں کے بغیر کارڈ کے لنک میں کلاس کو محفوظ طریقے سے شامل کر سکتے ہیں۔
کھینچے ہوئے لنکس کے ساتھ متعدد لنکس اور ٹیپ اہداف کی سفارش نہیں کی جاتی ہے۔ تاہم، کچھ 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>
پر مشتمل بلاک کی شناخت
اگر پھیلا ہوا لنک کام نہیں کرتا ہے، تو اس کی وجہ ممکنہ طور پر مشتمل بلاک ہو گا۔ درج ذیل سی ایس ایس کی خصوصیات ایک عنصر پر مشتمل بلاک بنائیں گی۔
- کے علاوہ ایک
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>