رابط ممتد
اجعل أي عنصر HTML أو مكون Bootstrap قابلاً للنقر عن طريق "تمديد" رابط متداخل عبر CSS.
أضف .stretched-link
إلى رابط لجعل الكتلة التي تحتوي عليها قابلة للنقر عبر ::after
عنصر زائف. في معظم الحالات ، يعني هذا أن العنصر position: relative;
الذي يحتوي على ارتباط .stretched-link
بالفئة قابل للنقر عليه.
تتوفر البطاقات position: relative
افتراضيًا في Bootstrap ، لذا في هذه الحالة يمكنك إضافة .stretched-link
الفصل بأمان إلى رابط في البطاقة دون أي تغييرات HTML أخرى.
لا يُنصح باستخدام روابط متعددة وأهداف النقر مع الروابط الممتدة. position
ومع ذلك ، z-index
يمكن أن تساعد بعض الأساليب إذا لزم الأمر.
بطاقة مع وصلة ممتدة
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
اذهب لمكان مالا تحتوي كائنات الوسائط 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. دونيك لاسينيا كونيج فيليس في فوسيبوس.
اذهب لمكان ماتكون الأعمدة بشكل position: relative
افتراضي ، لذا فإن الأعمدة القابلة للنقر لا تتطلب سوى .stretched-link
الفصل على ارتباط. ومع ذلك ، فإن تمديد ارتباط فوق كامل .row
يتطلب .position-static
على العمود .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. دونيك لاسينيا كونيج فيليس في فوسيبوس.
اذهب لمكان ماتحديد الكتلة المحتوية
إذا كان الارتباط الممتد لا يعمل ، فمن المحتمل أن تكون الكتلة المحتوية هي السبب. ستجعل خصائص CSS التالية العنصر الكتلة المحتوية:
- قيمة
position
بخلافstatic
- أ
transform
أوperspective
قيمة أخرى غيرnone
- قيمة أو
will-change
_transform
perspective
- قيمة
filter
بخلافnone
أوwill-change
قيمةfilter
(تعمل فقط على Firefox)
بطاقة مع وصلات ممتدة
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
لن يعمل الرابط الممتد هنا ، لأنه position: relative
تمت إضافته إلى الارتباط
سيتم نشر هذا الارتباط الممتد فقط فوق p
العلامة -tag ، لأنه يتم تطبيق تحويل عليه.