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. E'tibor bering , CSS qanday ishlashini hisobga olsak , uni ko'pgina jadval elementlari bilan aralashtirib bo'lmaydi.::afterposition: relative;.stretched-linkposition.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>

Aksariyat moslashtirilgan komponentlar position: relativesukut bo'yicha mavjud emas, shuning .position-relativeuchun havola asosiy elementdan tashqariga cho'zilishining oldini olish uchun bu yerni qo'shishimiz kerak.

Uzatilgan havola bilan moslashtirilgan komponent

Bu maxsus komponent uchun ba'zi to'ldiruvchi kontent. Bu ba'zi real dunyo kontenti qanday ko'rinishini taqlid qilish uchun mo'ljallangan va biz bu erda komponentga biroz tana va o'lcham berish uchun foydalanmoqdamiz.

Bir joyga boring

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

Uzatilgan havolali ustunlar

Ushbu boshqa moslashtirilgan komponent uchun to'ldiruvchi kontentning yana bir namunasi. Bu ba'zi real dunyo kontenti qanday ko'rinishini taqlid qilish uchun mo'ljallangan va biz bu erda komponentga biroz tana va o'lcham berish uchun foydalanmoqdamiz.

Bir joyga boring

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

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>