مکيه مواد ڏانهن وڃو Docs نيويگيشن ڏانھن وڃو
Check
in English

ڳنڍيل ڳنڍ

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

.stretched-linkھڪڙي لنڪ ۾ شامل ڪريو ان تي مشتمل بلاڪ کي ڪلڪ ڪرڻ جي قابل بنائڻ لاءِ هڪ ::afterpseudo عنصر ذريعي. اڪثر ڪيسن ۾، هن جو مطلب آهي ته هڪ عنصر جنهن سان گڏ position: relative;هڪ لنڪ شامل آهي .stretched-linkڪلاس سان ڪلڪ ڪري سگهجي ٿو. مھرباني ڪري نوٽ ڪريو ته CSS ڪيئن positionڪم ڪري ٿو ، .stretched-linkگھڻن ٽيبل عناصر سان ملائي نٿو سگھجي.

بوٽ اسٽريپ ۾ ڪارڊ position: relativeڊفالٽ طور تي آهن، تنهنڪري هن صورت ۾ توهان محفوظ طور تي .stretched-linkڪلاس کي ڪارڊ ۾ لنڪ ۾ شامل ڪري سگهو ٿا بغير ڪنهن ٻئي HTML تبديلين جي.

گھڻا لنڪس ۽ ٽيپ ھدف وڌايل لنڪ سان سفارش نه ڪئي وئي آھي. تنهن هوندي، ڪجهه position۽ z-indexاندازن جي مدد ڪري سگھن ٿيون ته ضرورت هجي.

Card image cap
وڌايل لنڪ سان ڪارڊ

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

ڪيڏانهن وڃ
html
<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
وڌايل لنڪ سان ڪسٽم جزو

ھي آھي ڪجھ جڳھ ھولڊر مواد ڪسٽم جزو لاءِ. اهو ارادو ڪرڻ آهي ته ڪجهه حقيقي دنيا جو مواد ڪهڙو نظر ايندو، ۽ اسان ان کي استعمال ڪري رهيا آهيون هتي جزو کي ٿورو جسم ۽ سائيز ڏيڻ لاء.

ڪيڏانهن وڃ
html
<div class="d-flex position-relative">
  <img src="..." class="flex-shrink-0 me-3" alt="...">
  <div>
    <h5 class="mt-0">Custom component with stretched link</h5>
    <p>This is some placeholder content for the 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>
Generic placeholder image
وڌايل لنڪ سان ڪالمن

ھن ٻئي ڪسٽم جزو لاءِ جڳھ رکندڙ مواد جو ٻيو مثال. اهو ارادو ڪرڻ آهي ته ڪجهه حقيقي دنيا جو مواد ڪهڙو نظر ايندو، ۽ اسان ان کي استعمال ڪري رهيا آهيون هتي جزو کي ٿورو جسم ۽ سائيز ڏيڻ لاء.

ڪيڏانهن وڃ
html
<div class="row g-0 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 p-4 ps-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(صرف فائر فاڪس تي ڪم ڪندو آهي)
Card image cap
وڌايل لنڪ سان ڪارڊ

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

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

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

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