رابط ممتد

اجعل أي عنصر 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 أنتي sollicitudin. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. دونيك لاسينيا كونيج فيليس في فوسيبوس.

اذهب لمكان ما

<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_transformperspective
قيمة filterبخلاف noneأو will-changeقيمة filter(تعمل فقط على Firefox)

بطاقة مع وصلات ممتدة

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

لن يعمل الرابط الممتد هنا ، لأنه position: relativeتمت إضافته إلى الارتباط

سيتم نشر هذا الارتباط الممتد فقط فوق pالعلامة -tag ، لأنه يتم تطبيق تحويل عليه.

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