Ձգված հղում

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

Ավելացրեք .stretched-linkհղմանը, որպեսզի դրա պարունակող բլոկը կտտացվի ::afterկեղծ տարրի միջոցով: Շատ դեպքերում դա նշանակում է, որ այն տարրը, position: relative;որն ունի .stretched-linkդասի հետ կապված հղում, կարող է սեղմել: Խնդրում ենք նկատի ունենալ, թե ինչպես է աշխատում CSS-position ը , .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այստեղ ավելացնենք, որպեսզի հղումը չտարածվի մեդիա օբյեկտից դուրս:

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

Սա որոշ տեղապահի բովանդակություն է մեդիա օբյեկտի համար: Այն նախատեսված է ընդօրինակելու, թե ինչ տեսք կունենան իրական աշխարհի որոշ բովանդակություն, և մենք այն օգտագործում ենք այստեղ՝ բաղադրիչին մի փոքր կառուցվածք և չափս տալու համար:

Գնացեք ինչ-որ տեղ

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