مشكلة التضارب بين نظام الشبكة Bootstrap و الاستعلامات الإضافية للوسائط

هذا هو بنية الـ html

<div class="row">
  <div class="col-sm-6 col-xs-12">
    <p class="text-left one">
      1111
    </p>
  </div>
  <div class="col-sm-6 col-xs-12">
    <p class="text-right two">
      2222
    </p>
  </div>
</div>

أريد تحقيق تأثير في عرض الشاشة أكبر من 768، 1111 يسارًا، 2222 يمينًا، أقل من أو يساوي 768 يركزًا. لذلك قمت بكتابة استعلام وسائل الاعلام الإضافية

@media (max-width: 768px) {
  .container-fluid .row p{
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 30px;
  }
  .row .text-left{
    margin-top: 20px;
  }
}

النهاية النهائية ستشبه الشكل التالي

يبدو أن كل شيء طبيعي، ولكن هناك مشكلة عند نقطة التحول 768px، كما في الشكل

عند فتح وحدة التحكم، ستجد أن أنماط الرموز الثلاثة على الجانب الأيمن تستخدم text-align:center;، ولكن لماذا يظهر الإصدار المختلف؟

السبب يكمن في نظام الشبكة المحدد من قبل المستوى الأعلى، قم بمراجعة div المستوى الأعلى ل .text-right، ستجد أن عرضه هو 50%

لذلك عند عرض عرض الشاشة 768px، هناك أنماط معينة وأيضًا أنماط نظام الشبكة الأصلي، مما يؤدي إلى الفوضى، السبب الأساسي هو عدم الانتباه إلى الجوهر نظام الشبكة

/* صغير جدًا للشاشة (الهاتف، أقل من 768px) */
/* لا يوجد أي كود مرتبط بـ الاستعلامات الإعلامية، لأن هذا هو الحالة الافتراضية في Bootstrap (أتذكر أن Bootstrap هو أولاً للهواتف النقالة؟) */
/* الشاشات الصغيرة (平板، أكبر أو مساوي لـ 768px) */
@media (min-width: @screen-sm-min) { ... }
/* الشاشات المتوسطة (شاشات سطح المكتب، أكبر أو مساوي لـ 992px) */
@media (min-width: @screen-md-min) { ... }
/* الشاشات الكبيرة (شاشات سطح المكتب، أكبر أو مساوي لـ 1200px) */
@media (min-width: @screen-lg-min) { ... }

يُستخدم نظام الشبكة باستخدام min-width، ويكون أكبر أو مساوٍ لـ، بينما يتم استخدام الاستعلامات الإعلامية الإضافية التي أقوم بتعريفها باستخدام max-width، ويكون أصغر أو مساوٍ لـ، مما يؤدي إلى وجود تلاقي عند 768px، مما يؤدي إلى فوضى في النمط النهائي.

الحل:

لإزالة التداخل، عند تعريف الاستعلامات الإعلامية الخاصة بك، قم بتعريف max-width:767px

ما ذكرته أعلاه هو مشكلة التداخل بين نظام الشبكة Bootstrap الخاص بي والاستعلامات الإعلامية الإضافية التي أقوم بتعريفها، آمل أن يكون ذلك مفيدًا لك، إذا كان لديك أي استفسارات، فالرجاء ترك تعليق، وسأقوم بالرد عليك في أقرب وقت ممكن!

البيان: محتويات هذا المقال تم جمعها من الإنترنت، ملكية الملكية لكل من يملكها، محتويات تم تقديمها من قبل مستخدمي الإنترنت بطرقهم الخاصة، هذا الموقع لا يمتلك الحقوق، لم يتم تعديل المحتويات بشكل يدوي، ولا يتحمل أي مسؤولية قانونية متعلقة بذلك. إذا اكتشفت محتوى يشتبه في حقوق النسخ، فالرجاء إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (الرجاء استبدال # بـ @) لإبلاغنا، وتقديم الدليل على ذلك، وسيتم حذف المحتوى المشبوه فور التحقق منه.