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="media position-relative">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media with stretched link</h5>
    <p>This is some placeholder content for the media object. 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>

تكون الأعمدة بشكل position: relativeافتراضي ، لذا فإن الأعمدة القابلة للنقر لا تتطلب سوى .stretched-linkالفصل على ارتباط. ومع ذلك ، فإن تمديد ارتباط فوق كامل .rowيتطلب .position-staticعلى العمود .position-relativeوالصف.

Generic placeholder image
الأعمدة ذات الارتباط الممتد

مثيل آخر لمحتوى العنصر النائب لهذا المكون المخصص الآخر. الغرض منه تقليد الشكل الذي سيبدو عليه بعض المحتوى الواقعي ، ونحن نستخدمه هنا لمنح المكون القليل من الجسم والحجم.

اذهب لمكان ما
<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>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)
Card image cap
بطاقة مع وصلات ممتدة

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

لن يعمل الرابط الممتد هنا ، لأنه 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>