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-link
qilish 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.::after
position: relative;
.stretched-link
position
.stretched-link
Kartalar position: relative
sukut bo'yicha Bootstrap-da mavjud, shuning uchun bu holda siz .stretched-link
boshqa 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 position
va z-index
uslublar 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: relative
sukut bo'yicha mavjud emas, shuning .position-relative
uchun 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
position
boshqa qiymatstatic
- A
transform
yokiperspective
boshqa qiymatnone
- yoki
will-change
qiymati _transform
perspective
- Bundan
filter
boshqa qiymatnone
yokiwill-change
qiymatifilter
(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: relative
havolaga 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>