الضبط الدقيق لتباعد شبكة Bootstrap

في تخطيط شبكة Bootstrap، تواجه تحديًا فيما يتعلق بالتباعد بين الأعمدة. على الرغم من أن الحل المتمثل في استخدام col-md-5 مع السحب لليسار والسحب لليمين قد يؤدي إلى توفير مساحة كبيرة جدًا، إلا أنه يتوفر نهج أكثر دقة.

الحل: دمج Div داخل الأعمدة

قم بدمج div داخل كل عمود col-md-6 وقم بتطبيق الهامش والحشوة المطلوبة على div المتداخل. يحافظ هذا الأسلوب على السلامة الهيكلية للعمود مع السماح بتباعد إضافي داخل كل عمود.

الكود:

    

        
Widget 1
    
    

        
Widget 2
    

CSS:

.classWithPad {
    margin: 10px;
    padding: 10px;
}

باستخدام هذا الحل، يمكنك بسهولة إضافة التباعد المطلوب إلى أعمدتك دون التضحية بالاتساق الهيكلي لتخطيط الشبكة.