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

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

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

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

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

Кайдадыр бар

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

Колонналар 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>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, чөнки аңа трансформация кулланыла.

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