in English

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. Si prega di notare, dato come funziona CSSposition , .stretched-linknon può essere mescolato con la maggior parte degli elementi della tabella.

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 image cap
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.

Generic placeholder image
Supporti con collegamento allungato

Questo è un contenuto segnaposto per l'oggetto multimediale. Ha lo scopo di imitare l'aspetto di alcuni contenuti del mondo reale e lo stiamo usando qui per dare al componente un po' di corpo e dimensioni.

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

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.

Generic placeholder image
Colonne con maglia allungata

Un'altra istanza di contenuto segnaposto per questo altro componente personalizzato. Ha lo scopo di imitare l'aspetto di alcuni contenuti del mondo reale e lo stiamo usando qui per dare al componente un po' di corpo e dimensioni.

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

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)
Card image cap
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>