تړل شوی لینک

هر HTML عنصر یا د بوټسټریپ اجزا د CSS له لارې د نیست شوي لینک "پراخولو" سره د کلیک کولو وړ کړئ.

یو لینک ته اضافه کړئ .stretched-linkترڅو د دې شامل بلاک::after د سیډو عنصر له لارې د کلیک کولو وړ وي. په ډیری مواردو کې، دا پدې مانا ده چې یو عنصر 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, 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.

چیرته لاړ شه

<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ارزښت 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>