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

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

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

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

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

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

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

Кайдадыр бар

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

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

Гравида нуллада крас утыра. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, вестибулумда вестибулум, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia conue felis faucibus.

Кайдадыр бар

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

Колонналар position: relativeкилешү буенча, шуңа күрә басыла торган баганалар .stretched-linkсылтамадагы классны гына таләп итә. Ләкин, баганага һәм рәткә сылтаманы сузу кирәк .row..position-static.position-relative

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

Кайдадыр бар

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

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

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

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

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

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

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

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

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