Μετάβαση στο κύριο περιεχόμενο Μετάβαση στην πλοήγηση εγγράφων
in English

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

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

Προσθέστε .stretched-linkσε έναν σύνδεσμο για να κάνετε κλικ στο μπλοκ που περιέχει μέσω ενός ::afterψευδοστοιχείου. Στις περισσότερες περιπτώσεις, αυτό σημαίνει ότι ένα στοιχείο με position: relative;αυτό περιέχει έναν σύνδεσμο με την .stretched-linkκλάση μπορεί να κάνει κλικ. Λάβετε υπόψη τον τρόπο λειτουργίας του CSSposition , .stretched-linkδεν μπορεί να αναμιχθεί με τα περισσότερα στοιχεία πίνακα.

Οι κάρτες έχουν position: relativeαπό προεπιλογή στο Bootstrap, οπότε σε αυτήν την περίπτωση μπορείτε να προσθέσετε με ασφάλεια την .stretched-linkκλάση σε έναν σύνδεσμο στην κάρτα χωρίς άλλες αλλαγές HTML.

Δεν συνιστώνται πολλοί σύνδεσμοι και στόχοι πατήματος με εκτεταμένους συνδέσμους. Ωστόσο, ορισμένα positionκαι z-indexστυλ μπορούν να βοηθήσουν εάν αυτό απαιτείται.

Card image cap
Κάρτα με τεντωμένο σύνδεσμο

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

Πάω κάπου
<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εδώ για να αποτρέψουμε την επέκταση του συνδέσμου εκτός του γονικού στοιχείου.

Generic placeholder image
Προσαρμοσμένο στοιχείο με τεντωμένο σύνδεσμο

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

Πάω κάπου
<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>
Generic placeholder image
Στήλες με τεντωμένο σύνδεσμο

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

Πάω κάπου
<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)
Card image cap
Κάρτα με τεντωμένους συνδέσμους

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

Ο εκτεταμένος σύνδεσμος δεν θα λειτουργήσει εδώ, επειδή 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>