ڳنڍيل ڳنڍ

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

.stretched-linkھڪڙي لنڪ ۾ شامل ڪريو ان تي مشتمل بلاڪ کي ڪلڪ ڪرڻ جي قابل بنائڻ لاءِ هڪ ::afterpseudo عنصر ذريعي. اڪثر ڪيسن ۾، هن جو مطلب آهي ته هڪ عنصر جنهن سان گڏ position: relative;هڪ لنڪ شامل آهي .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هتي شامل ڪرڻ جي ضرورت آهي لنڪ کي ميڊيا اعتراض کان ٻاهر وڌائڻ کان روڪڻ لاء.

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

Cras sit amet nibh libero, 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.

ڪيڏانهن وڃ

<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قطار تي.

وڌايل لنڪ سان ڪالمن

ڪيڏانهن وڃ

<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(صرف فائر فاڪس تي ڪم ڪندو آهي)

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

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

وڌايل لنڪ هتي ڪم نه ڪندي، ڇاڪاڻ ته 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>