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

Κάντε κλικ σε οποιοδήποτε στοιχείο HTML ή στοιχείο Bootstrap "τεντώνοντας" έναν ένθετο σύνδεσμο μέσω CSS.

Προσθέστε .stretched-linkσε έναν σύνδεσμο για να κάνετε κλικ στο μπλοκ που περιέχει μέσω ενός ::afterψευδοστοιχείου. Στις περισσότερες περιπτώσεις, αυτό σημαίνει ότι ένα στοιχείο με position: relative;αυτό περιέχει έναν σύνδεσμο με την .stretched-linkκλάση μπορεί να κάνει κλικ. Λάβετε υπόψη τον τρόπο λειτουργίας του CSSposition , .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="d-flex position-relative">
  <img src="..." class="flex-shrink-0 me-3" alt="...">
  <div>
    <h5 class="mt-0">Custom component with stretched link</h5>
    <p>This is some placeholder content for the 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>

Στήλες με τεντωμένο σύνδεσμο

Μια άλλη παρουσία περιεχομένου κράτησης θέσης για αυτό το άλλο προσαρμοσμένο στοιχείο. Προορίζεται να μιμηθεί αυτό που θα μοιάζει με κάποιο πραγματικό περιεχόμενο και το χρησιμοποιούμε εδώ για να δώσουμε στο στοιχείο λίγο σώμα και μέγεθος.

Πάω κάπου

<div class="row g-0 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 p-4 ps-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
Α 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>