رابط ممتد

اجعل أي عنصر 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_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>