Сузылган сылтама

CSS аша ояланган сылтаманы "сузып" теләсә нинди HTML элементын яки Bootstrap компонентын басыгыз.

Псевдо элементы аша аның блогын.stretched-link басу өчен сылтамага өстәгез . Күпчелек очракта, бу класс белән сылтама булган элементның чирттерелүен аңлата. Зинһар , CSSның ничек эшләвен искә төшерегез , күпчелек өстәл элементлары белән катнашып булмый.::afterposition: relative;.stretched-linkposition.stretched-link

Карточкалар position: relativeBootstrap'та килешү буенча бар, шуңа күрә бу очракта сез .stretched-linkбүтән HTML үзгәртүләрсез классны карточкадагы сылтамага куркынычсыз рәвештә өсти аласыз.

Берничә сылтама һәм кран максатлары сузылган сылтамалар белән тәкъдим ителми. Ләкин, моның өчен кайбер positionһәм z-indexстильләр ярдәм итә ала.

Сузылган сылтама белән карточка

Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.

Кайдадыр бар

html

<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сылтаманы төп элементтан читтә сузмас өчен монда өстәргә кирәк.

Сузылган сылтама белән махсус компонент

Бу махсус компонент өчен ниндидер урын иясе. Бу кайбер реаль дөнья эчтәлеген охшату өчен ясалган, һәм без монда компонентка бераз тән һәм зурлык бирү өчен кулланабыз.

Кайдадыр бар

html

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

Сузылган сылтама белән баганалар

Бу бүтән махсус компонент өчен урын ияләренең тагын бер мисалы. Бу кайбер реаль дөнья эчтәлеген охшату өчен ясалган, һәм без монда компонентка бераз тән һәм зурлык бирү өчен кулланабыз.

Кайдадыр бар

html

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

Блокны ачыклау

Әгәр дә сузылган сылтама эшләмәсә, булган блок , мөгаен, сәбәп булыр. Түбәндәге CSS үзлекләре блокны үз эченә ала:

Аннан positionбашка кыйммәтstatic
А transformяки perspectiveбашка кыйммәтnone
will-changeКыйммәт transformяки _perspective
Башка filterкыйммәт noneяки will-changeкыйммәт filter(Firefox'та гына эшли)

Сузылган сылтамалар белән карточка

Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.

Сузылган сылтама монда эшләмәячәк, чөнки position: relativeсылтамага өстәлә

Бу сузылган сылтама -таг өстендә генә таралачак p, чөнки аңа трансформация кулланыла.

html

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