يستخدم مكتب الاستقبال الأخير للمشروع bootstrap.css + AngularJS ، والخلفية تعالج البيانات فقط (باستخدام PHP ، تكون نتيجة المعالجة JSON_ENCODE مباشرة ($ arr) ، وهي رائعة جدًا). كانت اختبارات آلة المحاكاة على Chrome مثالية ، وليس هناك اختبار حقيقي للآلة. بعد الانتهاء من ذلك ، شعرت بالذهول عندما كنت أختبر على الهاتف. عندما قمت بتمرير الصفحة اليسرى واليمين ، ظهر شريط عمودي فارغ (كما هو موضح في الشكل أدناه). يتم تحديد أنه يرجع إلى الطول المحدد بواسطة يمين الهامش. تحقق من CSS ، وليس هناك رمز ذي صلة. يبدو أن المشكلة تحدث في bootstrap. على الرغم من أنه لا يؤثر على استخدام البرنامج ، إلا أنه يبدو محرجًا للغاية ويجب عليك إصلاحه.
تحقق من الصفحة وابحث عن أن هذه المشكلة لن تحدث إلا إذا تم استخدام الصفحة التي تستخدم نظام الشبكة. تحقق من CSS المرتبطة. وتجد أن تعريف الهامش الخاص به كما يلي:
.ROW {margin-left: -15px ؛ margin-right: -15px ؛}يتم استخدام row بشكل عام كعنصر أقل للحاوية وكعنصر أعلى من .col-xx-xx. بالمناسبة ، تحقق من CSS من .Container و Con-XX-XX:
.container {padding-left: 15px ؛ padding-right: 15px ؛}.إن الهوامش الداخلية لجميع عناصر.-container لها مسافة 15 بكسل ، والتي تبدو جميلة جدًا ، والهوامش الداخلية لـ .col-xx-xx تضع 15 بكسل. لن يتم محاذاة هذا مع عناصر .contariner (المسافة بين .col-xx-xx و .container هي 30 بكسل) ، وبالتالي يجب تعيين عنصر العنصر النقطي الأول والعنصر النقطي الأخير على {padding-left: 0px ؛} و {padding-right: 0px ؛} على التوالي. هذا يحل مشكلة المحاذاة ، ولكن بعد الإعداد ، على الرغم من أن عرض كل شبكة هو نفسه ، فإن عرض المحتوى المعروض هو 15 بكسل. لذلك اعتمد عباقرة FB بذكاء حل الحدود الخارجية السلبية. لم يكن تطبيق الكود بسيطًا فحسب ، ولكن لم تكن هناك مشكلة في عرض غير متناسق للمحتوى المعروض في كل نقطية.
على الرغم من أن محلول الحدود الخارجية السلبية أمر جيد ، إلا أنه سيؤدي إلى حدود فارغة على الشاشات الصغيرة (المحطات المتنقلة) (يتم حل نقطة الألم في هذه المقالة). تخصيص Bootstrap يحل هذه المشكلة ، لكنه مزعج للغاية. أسهل طريقة هي إعادة كتابة CSS ذات الصلة.
/* بحاجة إلى الاتصال* //* fuck 15px لبدء iPhone بعد bootstrap.css */. ROW {margin: 0 ؛}. .COL-LG-9 ، .COL-MD-1 ، .COL-MD-10 ، .COL-MD-11 ، .COL-MD-12 ، .COL-MD-2 ، .COL-MD-3 ، .COL-MD-4 ، .COL-MD-5 ، .COL-MD-6 ، .COL-MD-7 ، .COL-MD-8 ، .COL-MD- 9 ، .COL-SM-1 ، .COL-SM-10 ، .COL-SM-11 ، .COL-SM-12 ، .COL-SM-2 ، .COL-SM-3 ، .COL-SM-4 ، .COL-SM-5 ، .COL-SM-6 ، .COL-SM-7 ، .COL-SM-8 ، .COL-SM-9 ، .COL- XS-1 ، .COL-XS-10 ، .COL-XS-11 ، .COL-XS-12 ، .COL-XS-2 ، .COL-XS-3 ، .COL-XS-4 ، .COL-XS-5 ، .COL-XS-6 ، .COL-XS-7 ، .COL-XS-8 ، يمارس الجنس مع 15px لـ iPhone فوق */تم حلها بنجاح لأن الشبكة لا تحتوي على حشوة ، وعرض كل سياج هو نفسه ، وعرض المحتوى المعروض هو نفسه أيضًا ، ويمكن توافقه مع عناصر الحاوية (ملاحظة: هذه النتيجة خطيرة للغاية ، أي أن المحتوى بين كل شبكة متصل ، ويمكن حل الشبكة الداخلية عن طريق إعادة تعريف البراجين في المركز).
ما سبق هو الأسباب والحلول للمساحة الفارغة على اليمين عند تمرير bootstrap.css على الهاتف المحمول. آمل أن يكون ذلك مفيدًا للجميع!