Collegamento allungato

Rendi selezionabile qualsiasi elemento HTML o componente Bootstrap "allungando" un collegamento nidificato tramite CSS.

Aggiungi .stretched-linka un link per rendere selezionabile il blocco che lo contiene tramite uno ::afterpseudo elemento. Nella maggior parte dei casi, ciò significa che un elemento con position: relative;che contiene un collegamento con la .stretched-linkclasse è selezionabile.

Le schede hanno position: relativeper impostazione predefinita Bootstrap, quindi in questo caso puoi tranquillamente aggiungere la .stretched-linkclasse a un collegamento nella scheda senza altre modifiche HTML.

Collegamenti multipli e destinazioni di tocco non sono consigliati con i collegamenti estesi. Tuttavia, alcuni positione z-indexstili possono aiutare se ciò fosse necessario.

Card con maglia allungata

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.

Andare da qualche parte

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

Gli oggetti multimediali non sono position: relativedisponibili per impostazione predefinita, quindi è necessario aggiungere .position-relativequi per evitare che il collegamento si estenda all'esterno dell'oggetto multimediale.

Supporti con collegamento allungato

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibolo in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Andare da qualche parte

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

Le colonne sono position: relativeper impostazione predefinita, quindi le colonne selezionabili richiedono solo la .stretched-linkclasse su un collegamento. Tuttavia, l'estensione di un collegamento su un intero .rowrichiede .position-staticsulla colonna e .position-relativesulla riga.

Colonne con maglia allungata

Andare da qualche parte

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

Identificazione del blocco contenitore

Se il collegamento allungato non sembra funzionare, la causa sarà probabilmente il blocco che lo contiene . Le seguenti proprietà CSS renderanno un elemento il blocco contenitore:

Un positionvalore diverso dastatic
A transformo perspectivevalore diverso danone
Un will-changevalore di transformoperspective
Un filtervalore diverso da noneo un will-changevalore di filter(funziona solo su Firefox)

Scheda con maglie allungate

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.

Il collegamento allungato non funzionerà qui, perché position: relativeviene aggiunto al collegamento

Questo collegamento allungato verrà distribuito solo sul ptag -tag, perché ad esso viene applicata una trasformazione.

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