تخصيص Bootstrap 3 لكسر الحد الأقصى المكون من 12 عمودًا في الصفوف

المشكلة

افتراضيًا، يفرض Bootstrap 3 تكديس أعمدة أكبر من 12 وحدة عموديًا بسبب سلوكهم "العائم: لا شيء". يمكن أن يعيق هذا القيد التخطيطات الديناميكية حيث يمكن إضافة كتل محتوى متعددة إلى صف واحد.

الحل

لكسر هذا القيد، يمكنك تطبيق تجاوزات CSS مخصصة لتجاوز سلوك Bootstrap والسماح للصفوف بالتكيف أكثر من 12 عمودًا. وإليك الطريقة:

/* col-xs float fix for large column groups */
.large-group .col-xs-12 {
  float: left;
}

/* col-sm float fix for large column groups */
@media (min-width: 768px) {
  .large-group .col-sm-12 {
    float: left;
  }
}

/* col-md float fix for large column groups */
@media (min-width: 992px) {
  .large-group .col-md-12 {
    float: left;
  }
}

/* col-lg float fix for large column groups */
@media (min-width: 1200px) {
  .large-group .col-lg-12 {
    float: left;
  }
}

مثال للتنفيذ

  

    
col 9
    
col 3
    
col 12
  

الترشيد

على الرغم من أن سلوك Bootstrap الافتراضي يضمن بقاء الصفوف متسقة بصريًا، إلا أنه قد لا يكون مناسبًا دائمًا للتخطيطات الديناميكية أو ذات المساحة المحدودة. يتيح هذا التخصيص قدرًا أكبر من المرونة والاستجابة في مثل هذه المواقف.