الفجوات في صفوف Bootstrap المكدسة: الحلول

في الشبكات المستندة إلى Bootstrap، من الشائع مواجهة مشكلات مع الفجوات عند تكديس المربعات ذات الارتفاعات المختلفة . ولمعالجة ذلك، فكر في الأساليب التالية:

1. تعيين ارتفاعات العناصر:

قم بتعيين ارتفاع ثابت لجميع العناصر داخل المحفظة لضمان المحاذاة المتسقة.

2. تخطيط البناء:

استخدم أداة مثل Masonry لضبط ارتفاع العناصر تلقائيًا وملاءمتها ضمن المساحة المتاحة.

3. إعادة تعيين الأعمدة المستجيبة:

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

4. Clearfix باستخدام استعلامات الوسائط:

بعد كل عنصر، أضف div مع مسح صغير. يمكن إخفاء ذلك باستخدام استعلامات الوسائط، مما يؤدي إلى معالجة مشكلة الفجوة بشكل فعال.

مثال الكود:

  

    

      ... (Element content)
    
  
  
  
  ... (Additional elements)

@media (max-width: 767px) {
  .portfolio > .clear:nth-child(6n)::before {
    /* Clearfix for mobile devices */
  }
}

منهج jQuery:

var row=$('.portfolio');
$.each(row, function() {
  var maxh = 0;
  $.each($(this).find('div[class^="col-"]'), function() {
    if($(this).height() > maxh)
      maxh = $(this).height();
  });
  $.each($(this).find('div[class^="col-"]'), function() {
    $(this).height(maxh); // Set element heights uniformly
  });
});