in English

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.

Card image cap
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.

Generic placeholder image
Uzatilgan havolaga ega media

Bu media ob'ekt 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="media position-relative">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media with stretched link</h5>
    <p>This is some placeholder content for the media object. 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>

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.

Generic placeholder image
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 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>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)
Card image cap
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>