الصنف media لا يعمل في bootstrap 5

1. المشكلة أنك تستخدم الإصدار الخامس من بوتستراب والذي لا يدعم media التي توقف دعمها من بعد الإصدار الرابع
2. لقد بحثت في ملف الhtml الخاص بك ومن الواضح أنك نسيت إعطاء العناصر الصنف noTransperrent حيث قمت بتعريف تنسيقات الصنف في ملف الcss ولكن نسيت أن تعطيه للعناصر
3. هذا يحدث لأن النسبة بين أبعاد الصورة تتغير, حيث على سبيل المثال إن كان عرض الصورة 200 بيكسل وإرتفاعها 100 بيكسل, إن أردت تغيير الإرتفاع إلى 50 يجب أيضًا بالمثل تغيير العرض إلى 100, لذا الحل أن تقوم بتحديد إرتفاع الصورة ومن ثم وضع خاصية العرض بشكل تلقائي width:auto حتى لا يتم إفساد أبعاد الصورة

  اقتباس

  بتاريخ On 11‏/2‏/2022 at 15:05 قال شرف الدين2:

1. المشكلة أنك تستخدم الإصدار الخامس من بوتستراب والذي لا يدعم media التي توقف دعمها من بعد الإصدار الرابع
2. لقد بحثت في ملف الhtml الخاص بك ومن الواضح أنك نسيت إعطاء العناصر الصنف noTransperrent حيث قمت بتعريف تنسيقات الصنف في ملف الcss ولكن نسيت أن تعطيه للعناصر
3. هذا يحدث لأن النسبة بين أبعاد الصورة تتغير, حيث على سبيل المثال إن كان عرض الصورة 200 بيكسل وإرتفاعها 100 بيكسل, إن أردت تغيير الإرتفاع إلى 50 يجب أيضًا بالمثل تغيير العرض إلى 100, لذا الحل أن تقوم بتحديد إرتفاع الصورة ومن ثم وضع خاصية العرض بشكل تلقائي width:auto حتى لا يتم إفساد أبعاد الصورة

أظهر المزيد  

 

أظهر المزيد  

حسنا" استاذ ولكن لم افهم كيف لم اعطي notransparrent للعناصر فلقد حدته في ملف js اي يظهر عند  النزول لاكثر من 200

وايضا" في بوتستراب 5 كيف يمكنني التعويض عن عدم وجود media لانه اذا ضمنت اصدراين ستظهر مشكله في heading

  بتاريخ On 11‏/2‏/2022 at 15:43 قال Ahmed Alfadaly:

حسنا" استاذ ولكن لم افهم كيف لم اعطي notransparrent للعناصر فلقد حدته في ملف js اي يظهر عند  النزول لاكثر من 200

وايضا" في بوتستراب 5 كيف يمكنني التعويض عن عدم وجود media لانه اذا ضمنت اصدراين ستظهر مشكله في heading

أظهر المزيد  

أعتذر لم أنتبه إلى ملف الجافاسكريبت, المشكلة لديك في ملف الجافاسكريبت أنك تحاول إستخدام جيكويري على الرغم أنك لم تضعها في الملفات, فلو دخلت إلى المسار /assetستجده فارغًا ليس به جيكويري, برجاء تنزيلها أو وضع هذا الاسكريبت ومسح وسم الاسكريبت الذي يُشير إلى مكان الجيكويري في المسار asset/jquery

  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

بالنسبة إلى تعويض عدم وجود media فيمكنك تعويضها بإستخدام التنسيقات وأصناف بوتستراب مثل الflex , على سبيل المثال يمكنك إستخدام تلك الأصناف لتعويض الصنف media 

 <div class="col-md">
                        <div class="d-flex">
                            <div class="flex-shrink-0">
                                <img class="mr-3" src="test.png" width="50"/>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h5 class="mt-0 text-left">
                                        EASY CUSTOMIZATION
                                    </h5>
                                    <p class="mb-2 text-left">
                                        Seamlessly restore client-focused potentialities rather than functional
                                        strategic theme areas.
                                    </p>


                            </div>
                        </div>

حيث قمنا هنا بإستخدامم flex-box بغرض تقسيم المحتوى إلى قسمين, قسم للصورة وقسم للنصوص