Bootstrap/stretched-link

اجعل أي عنصر 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">بطاقة ذات روابط ممتدة</h5>
    <p class="card-text">مثال بسيط للبناء على عنوان البطاقة ومحتواها.</p>
    <a href="#" class="btn btn-primary stretched-link">اذهب لمكان ما</a>
  </div>
</div>

كائنات الوسائط ليس لها الخاصية position: relative افتراضيا، لذلك نحتاج إلى إضافة ‎.position-relative هنا لمنع الرابط من التمدد خارج كائن الوسائط.

<div class="media position-relative">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">كائن وسائط ذو روابط ممتدة</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">اذهب إلى مكان ما</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">أعمدة ذات روابط ممتدة</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">اذهب إلى مكان ما</a>
  </div>
</div>

تحديد الكتلة الحاوية

إذا لم يعمل الرابط الممتد كما هو متوقع، فعلى الأرجح أنّ السبب هو الكتلة التي تحتويه. تذكّر أنّ خاصيات CSS التالية ستجعل عنصرًا ما كتلة حاوية:

• أيّ قيمة للخاصية position خلا static
• أيّ قيمة للخاصية transform أو perspective خلا none
• في حال كانت قيمة transform أو perspective تساوي will-change
• أيّ قيمة للخاصية  filter  خلا none، أو تمرير القيمة will-change للخاصية filter  (تعمل على فايرفوكس فقط)

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">بطاقة ذات روابط ممتدة</h5>
    <p class="card-text">مثال بسيط للبناء من عنوان البطاقة ومحتواها.</p>
    <p class="card-text">
      <a href="#" class="stretched-link text-danger" style="position: relative;">لن يعمل الرابط الممتد هنا، بسبب إضافة because <code>position: relative</code></a>
    </p>
    <p class="card-text bg-light" style="transform: rotate(0);">
      لن يمتد هذا  <a href="#" class="text-warning stretched-link">الرابط الممتد</a> إلا على <code>p</code>-tag, ذلك أنّ تحويلا قد طُبٍّق عليه.
    </p>
  </div>
</div>

مصادر

• صفحة stretched-link في توثيق Bootstrap.