Collegamento allungato
Rendi selezionabile qualsiasi elemento HTML o componente Bootstrap "allungando" un collegamento nidificato tramite CSS.
Aggiungi .stretched-link
a un link per rendere selezionabile il blocco che lo contiene tramite uno ::after
pseudo elemento. Nella maggior parte dei casi, ciò significa che un elemento con position: relative;
che contiene un collegamento con la .stretched-link
classe è selezionabile.
Le schede hanno position: relative
per impostazione predefinita Bootstrap, quindi in questo caso puoi tranquillamente aggiungere la .stretched-link
classe a un collegamento nella scheda senza altre modifiche HTML.
Collegamenti multipli e destinazioni di tocco non sono consigliati con i collegamenti estesi. Tuttavia, alcuni position
e z-index
stili 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 parteGli oggetti multimediali non sono position: relative
disponibili per impostazione predefinita, quindi è necessario aggiungere .position-relative
qui 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 parteLe colonne sono position: relative
per impostazione predefinita, quindi le colonne selezionabili richiedono solo la .stretched-link
classe su un collegamento. Tuttavia, l'estensione di un collegamento su un intero .row
richiede .position-static
sulla colonna e .position-relative
sulla riga.
Colonne con maglia allungata
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 parteIdentificazione 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
position
valore diverso dastatic
- A
transform
operspective
valore diverso danone
- Un
will-change
valore ditransform
operspective
- Un
filter
valore diverso danone
o unwill-change
valore difilter
(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.
Questo collegamento allungato verrà distribuito solo sul p
tag -tag, perché ad esso viene applicata una trasformazione.