Τεντωμένος σύνδεσμος

Κάντε κλικ σε οποιοδήποτε στοιχείο 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, 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 στο 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
Α transformή perspectiveαξία άλλη απόnone
Μια will-changeτιμή transformήperspective
Μια filterτιμή διαφορετική από noneή μια will-changeτιμή του filter(λειτουργεί μόνο στον Firefox)

Κάρτα με τεντωμένους συνδέσμους

Ο εκτεταμένος σύνδεσμος δεν θα λειτουργήσει εδώ, επειδή position: relativeπροστέθηκε στον σύνδεσμο

Αυτός ο εκτεταμένος σύνδεσμος θα απλωθεί μόνο πάνω από την pετικέτα -, επειδή εφαρμόζεται ένας μετασχηματισμός σε αυτήν.

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