Ali Mezher نشر 20 فبراير 2022 أرسل تقرير نشر 20 فبراير 2022 عندما اعمل زوم للصفحة لنسبة 100% تظهر البطاقات منلاصقة وليست متبعادة (باستخدام bootstrap5) كما موضح بالشكل 1 اقتباس
0 بلال زيادة نشر 20 فبراير 2022 أرسل تقرير نشر 20 فبراير 2022 هذا بسبب كيفية وضع الأعمدة بداخل الصفحة , بحيث أعتقد أنك قم باستخدام المحدد col-md-4 لكل عمود بحيث يظهر في كل صف فقط 3 أعمدة و بالتالي كل عمود يكون كبير نسبياً مقارنة بحجم الصفحة. حاول تقليل حجم العمود وجعله مثلاً col-md-3 و من ثم حدث الصفحة و لاحظ هل تغير الحجم لكل عمود أو لا . اقتباس
0 Ali Mezher نشر 20 فبراير 2022 الكاتب أرسل تقرير نشر 20 فبراير 2022 بتاريخ 30 دقائق مضت قال بلال زيادة: هذا بسبب كيفية وضع الأعمدة بداخل الصفحة , بحيث أعتقد أنك قم باستخدام المحدد col-md-4 لكل عمود بحيث يظهر في كل صف فقط 3 أعمدة و بالتالي كل عمود يكون كبير نسبياً مقارنة بحجم الصفحة. حاول تقليل حجم العمود وجعله مثلاً col-md-3 و من ثم حدث الصفحة و لاحظ هل تغير الحجم لكل عمود أو لا . لم يعمل 1 اقتباس
0 بلال زيادة نشر 20 فبراير 2022 أرسل تقرير نشر 20 فبراير 2022 بتاريخ الآن قال Ali Mezher: لم يعمل هل يمكنك إرفاق الكود التي توجد به مشكلة ؟ اقتباس
0 Ali Mezher نشر 20 فبراير 2022 الكاتب أرسل تقرير نشر 20 فبراير 2022 بتاريخ الآن قال بلال زيادة: هل يمكنك إرفاق الكود التي توجد به مشكلة ؟ space.7z 1 اقتباس
0 بلال زيادة نشر 20 فبراير 2022 أرسل تقرير نشر 20 فبراير 2022 بتاريخ الآن قال Ali Mezher: space.7z أرجوا وضع الكود و ليس الملفات , حاول وضع الكود الخاص بالقسم التي تظهر به المشكلة ؟ اقتباس
0 Ali Mezher نشر 20 فبراير 2022 الكاتب أرسل تقرير نشر 20 فبراير 2022 <div class="container"> <div class="row"> <div class="col-4"> <div class="card bg-dark text-center text-white mt-5" style="width: 26rem"> <div class="card-body"> <i class="fa-solid fa-laptop fa-2x pb-3"></i> <h5 class="card-title">Virtual</h5> <p class="card-text"> Lorem , ipsum dolor sit amet consectetur adipisicing elit . lure, quas quidem possimus dolorum esse eligendi ? </p> <a href="#" class="btn btn-primary">Read More</a> </div> </div> </div> <div class="col-4"> <div class="card bg-secondary text-center text-white mt-5" style="width: 26rem"> <div class="card-body"> <i class="fa-solid fa-circle-user fa-2x pb-3"></i> <h5 class="card-title">Hybrid</h5> <p class="card-text">Lorem , ipsum dolor sit amet consectetur adipisicing elit . lure, quas quidem possimus dolorum esse eligendi ? </p> <a href="#" class="btn btn-dark">Read More</a> </div> </div> </div> <div class="col-4"> <div class="card bg-dark text-center text-white mt-5 mr-sm-2" style="width: 26rem"> <div class="card-body"> <i class="fa-solid fa-user-group fa-2x pb-3"></i> <h5 class="card-title">In Person</h5> <p class="card-text">Lorem , ipsum dolor sit amet consectetur adipisicing elit . lure, quas quidem possimus dolorum esse eligendi ? </p> <a href="#" class="btn btn-primary">Read More</a> </div> </div> </div> </div> </div> 1 اقتباس
0 بلال زيادة نشر 20 فبراير 2022 أرسل تقرير نشر 20 فبراير 2022 بتاريخ 27 دقائق مضت قال Ali Mezher: <div class="container"> <div class="row"> <div class="col-4"> <div class="card bg-dark text-center text-white mt-5" style="width: 26rem"> <div class="card-body"> <i class="fa-solid fa-laptop fa-2x pb-3"></i> <h5 class="card-title">Virtual</h5> <p class="card-text"> Lorem , ipsum dolor sit amet consectetur adipisicing elit . lure, quas quidem possimus dolorum esse eligendi ? </p> <a href="#" class="btn btn-primary">Read More</a> </div> </div> </div> <div class="col-4"> <div class="card bg-secondary text-center text-white mt-5" style="width: 26rem"> <div class="card-body"> <i class="fa-solid fa-circle-user fa-2x pb-3"></i> <h5 class="card-title">Hybrid</h5> <p class="card-text">Lorem , ipsum dolor sit amet consectetur adipisicing elit . lure, quas quidem possimus dolorum esse eligendi ? </p> <a href="#" class="btn btn-dark">Read More</a> </div> </div> </div> <div class="col-4"> <div class="card bg-dark text-center text-white mt-5 mr-sm-2" style="width: 26rem"> <div class="card-body"> <i class="fa-solid fa-user-group fa-2x pb-3"></i> <h5 class="card-title">In Person</h5> <p class="card-text">Lorem , ipsum dolor sit amet consectetur adipisicing elit . lure, quas quidem possimus dolorum esse eligendi ? </p> <a href="#" class="btn btn-primary">Read More</a> </div> </div> </div> </div> </div> أظن أنه يجب تغيير col-md-3 كالتالي و أخباري بالنتيجة ، <div class="container"> <div class="row"> <div class="col-md-3"> <div class="card bg-dark text-center text-white mt-5" style="width: 26rem"> <div class="card-body"> <i class="fa-solid fa-laptop fa-2x pb-3"></i> <h5 class="card-title">Virtual</h5> <p class="card-text"> Lorem , ipsum dolor sit amet consectetur adipisicing elit . lure, quas quidem possimus dolorum esse eligendi ? </p> <a href="#" class="btn btn-primary">Read More</a> </div> </div> </div> <div class="col-md-3"> <div class="card bg-secondary text-center text-white mt-5" style="width: 26rem"> <div class="card-body"> <i class="fa-solid fa-circle-user fa-2x pb-3"></i> <h5 class="card-title">Hybrid</h5> <p class="card-text">Lorem , ipsum dolor sit amet consectetur adipisicing elit . lure, quas quidem possimus dolorum esse eligendi ? </p> <a href="#" class="btn btn-dark">Read More</a> </div> </div> </div> <div class="col-md-3"> <div class="card bg-dark text-center text-white mt-5 mr-sm-2" style="width: 26rem"> <div class="card-body"> <i class="fa-solid fa-user-group fa-2x pb-3"></i> <h5 class="card-title">In Person</h5> <p class="card-text">Lorem , ipsum dolor sit amet consectetur adipisicing elit . lure, quas quidem possimus dolorum esse eligendi ? </p> <a href="#" class="btn btn-primary">Read More</a> </div> </div> </div> </div> </div> اقتباس
0 Ali Mezher نشر 20 فبراير 2022 الكاتب أرسل تقرير نشر 20 فبراير 2022 بتاريخ 15 دقائق مضت قال بلال زيادة: أظن أنه يجب تغيير col-md-3 كالتالي و أخباري بالنتيجة ، <div class="container"> <div class="row"> <div class="col-md-3"> <div class="card bg-dark text-center text-white mt-5" style="width: 26rem"> <div class="card-body"> <i class="fa-solid fa-laptop fa-2x pb-3"></i> <h5 class="card-title">Virtual</h5> <p class="card-text"> Lorem , ipsum dolor sit amet consectetur adipisicing elit . lure, quas quidem possimus dolorum esse eligendi ? </p> <a href="#" class="btn btn-primary">Read More</a> </div> </div> </div> <div class="col-md-3"> <div class="card bg-secondary text-center text-white mt-5" style="width: 26rem"> <div class="card-body"> <i class="fa-solid fa-circle-user fa-2x pb-3"></i> <h5 class="card-title">Hybrid</h5> <p class="card-text">Lorem , ipsum dolor sit amet consectetur adipisicing elit . lure, quas quidem possimus dolorum esse eligendi ? </p> <a href="#" class="btn btn-dark">Read More</a> </div> </div> </div> <div class="col-md-3"> <div class="card bg-dark text-center text-white mt-5 mr-sm-2" style="width: 26rem"> <div class="card-body"> <i class="fa-solid fa-user-group fa-2x pb-3"></i> <h5 class="card-title">In Person</h5> <p class="card-text">Lorem , ipsum dolor sit amet consectetur adipisicing elit . lure, quas quidem possimus dolorum esse eligendi ? </p> <a href="#" class="btn btn-primary">Read More</a> </div> </div> </div> </div> </div> كلا لم يعمل 1 اقتباس
0 بلال زيادة نشر 20 فبراير 2022 أرسل تقرير نشر 20 فبراير 2022 بتاريخ 4 ساعات قال Ali Mezher: كلا لم يعمل أرى أنك قمت بتحديد عرض للمحدد card style="width: 26rem" وبالتالي يمكنك حذف هذه الخاصية كي يتم وضع العرض الافتراضي للأعمدة ، أيضا يمكنك توسيط الصناديق بنصف الصفحة عن طريق إضافة المحدد justify-content-center إلى السطر التالي <div class="row justify-content-center"> اقتباس
0 Ali Mezher نشر 20 فبراير 2022 الكاتب أرسل تقرير نشر 20 فبراير 2022 بتاريخ 2 دقائق مضت قال بلال زيادة: أرى أنك قمت بتحديد عرض للمحدد card style="width: 26rem" وبالتالي يمكنك حذف هذه الخاصية كي يتم وضع العرض الافتراضي للأعمدة ، أيضا يمكنك توسيط الصناديق بنصف الصفحة عن طريق إضافة المحدد justify-content-center إلى السطر التالي <div class="row justify-content-center"> هذا يعمل بشكل ممتاز شكرا جزيلا 1 اقتباس
السؤال
Ali Mezher
عندما اعمل زوم للصفحة لنسبة 100% تظهر البطاقات منلاصقة وليست متبعادة (باستخدام bootstrap5) كما موضح بالشكل
10 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.