ڳنڍيل ڳنڍ

ڪنهن به HTML عنصر يا بوٽ اسٽريپ جزو کي CSS ذريعي "stretching" ذريعي ڪلڪ ڪيو وڃي.

.stretched-linkھڪڙي لنڪ ۾ شامل ڪريو ان تي مشتمل بلاڪ کي ڪلڪ ڪرڻ جي قابل بنائڻ لاءِ هڪ ::afterpseudo عنصر ذريعي. اڪثر ڪيسن ۾، هن جو مطلب آهي ته هڪ عنصر جنهن سان گڏ position: relative;هڪ لنڪ شامل آهي .stretched-linkڪلاس سان ڪلڪ ڪري سگهجي ٿو. مھرباني ڪري نوٽ ڪريو ته CSS ڪيئن 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قدرtransformperspective
هڪ filterقدر کان سواءِ noneيا هڪ will-changeقدر filter(صرف فائر فاڪس تي ڪم ڪندو آهي)

وڌايل لنڪ سان ڪارڊ

ڪارڊ جي عنوان تي تعمير ڪرڻ ۽ ڪارڊ جي مواد جو وڏو حصو ٺاهڻ لاء ڪجهه تڪڙو مثال ٽيڪسٽ.

وڌايل لنڪ هتي ڪم نه ڪندي، ڇاڪاڻ ته position: relativeلنڪ ۾ شامل ڪيو ويو آهي

هي وڌايل لنڪ صرف p-tag تي پکڙيل هوندو، ڇاڪاڻ ته ان تي هڪ ٽرانسفارم لاڳو ڪيو ويندو آهي.

<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>