Source

Uzatilgan havola

CSS orqali o'rnatilgan havolani "cho'zish" orqali istalgan HTML elementi yoki Bootstrap komponentini bosiladigan qilib qo'ying.

Undagi blokni psevdo element orqali bosiladigan .stretched-linkqilish uchun havolaga qo'shing . Ko'pgina hollarda, bu sinfga havolani o'z ichiga olgan elementni bosish mumkinligini anglatadi.::afterposition: relative;.stretched-link

Kartalar position: relativesukut bo'yicha Bootstrap-da mavjud, shuning uchun bu holda siz .stretched-linkboshqa HTML o'zgarishlarisiz sinfni kartadagi havolaga xavfsiz qo'shishingiz mumkin.

Bir nechta havolalar va teginish maqsadlari cho'zilgan havolalar bilan tavsiya etilmaydi. Biroq, agar kerak bo'lsa, ba'zi positionva z-indexuslublar yordam berishi mumkin.

Uzatilgan havolali karta

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Bir joyga boring

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

Media ob'ektlari position: relativesukut bo'yicha mavjud emas, shuning .position-relativeuchun havolani media ob'ektidan tashqariga cho'zilishining oldini olish uchun bu yerni qo'shishimiz kerak.

Uzatilgan havolaga ega media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum da vulputat, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Bir joyga boring

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

Ustunlar position: relativesukut bo'yicha, shuning uchun bosiladigan ustunlar faqat .stretched-linkhavoladagi sinfni talab qiladi. Biroq, havolani butun bo'ylab cho'zish uchun .rowustunda .position-staticva .position-relativeqatorda kerak bo'ladi.

Uzatilgan havolali ustunlar

Bir joyga boring

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

O'z ichiga olgan blokni aniqlash

Agar cho'zilgan havola ishlamasa, unda o'z ichiga olgan blok sabab bo'lishi mumkin. Quyidagi CSS xususiyatlari elementni o'z ichiga olgan blok qiladi:

dan positionboshqa qiymatstatic
A transformyoki perspectiveboshqa qiymatnone
yoki will-changeqiymati _transformperspective
Bundan filterboshqa qiymat noneyoki will-changeqiymati filter(faqat Firefox-da ishlaydi)

Uzatilgan havolalar bilan karta

Karta sarlavhasiga asoslanib, karta tarkibining asosiy qismini tashkil etadigan ba'zi tezkor misol matni.

Bu erda cho'zilgan havola ishlamaydi, chunki position: relativehavolaga qo'shilgan

Ushbu cho'zilgan havola faqat p-teg ustiga tarqaladi, chunki unga o'zgartirish qo'llaniladi.

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