Ձգված հղում

Ցանկացած HTML տարր կամ Bootstrap բաղադրիչ դարձրեք սեղմելի՝ «ձգելով» տեղադրվող հղումը CSS-ի միջոցով:

Ավելացրեք .stretched-linkհղմանը, որպեսզի դրա պարունակող բլոկը կտտացվի ::afterկեղծ տարրի միջոցով: Շատ դեպքերում դա նշանակում է, որ այն տարրը, position: relative;որն ունի .stretched-linkդասի հետ կապված հղում, կարող է սեղմել:

Քարտերը position: relativeլռելյայնորեն ունեն Bootstrap-ում, այնպես որ այս դեպքում դուք կարող եք ապահով կերպով ավելացնել .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այստեղ ավելացնենք, որպեսզի հղումը չտարածվի մեդիա օբյեկտից դուրս:

Ձգված հղումով մեդիա

Cras sit amet nibh libero, gravida nulla-ում: Նուլլա կամ մետուս սելերիսկ նախքան սոլիցիտուդին: Cras purus odio, գավիթ vulputate at, tempus viverra turpis: Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue 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
A transformկամ perspectiveայլ արժեք, քանnone
will-changeԱրժեք transformկամ _perspective
Այլ արժեք , filterքան noneկամ will-changeարժեքը filter(աշխատում է միայն Firefox-ում)

Քարտ ձգված հղումներով

Որոշ արագ օրինակ տեքստ, որը հիմնվում է քարտի վերնագրի վրա և կազմում է քարտի բովանդակության մեծ մասը:

Ձգված հղումն այստեղ չի աշխատի, քանի որ position: relativeավելացված է հղմանը

Այս ձգված հղումը կտարածվի միայն p-tag-ի վրա, քանի որ դրա վրա կիրառվում է փոխակերպում:

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