Bootstrap4模态框栅格布局列宽切换的边框碰撞与间距配置问题

当前的布局异常本质是两个逻辑冲突导致的：

• Bootstrap 栅格的间距依赖列的左右内边距实现，而元素的outline不占文档流空间，没有预留足够的避让距离时，相邻元素的描边会直接重叠碰撞
• 直接在栅格列上硬编码固定宽高，打破了栅格本身的流式宽度计算逻辑，导致justify-content-center计算的居中位置和实际元素总宽度不匹配，最终出现布局偏斜

• 统一栅格间距配置：给承载列的row容器直接加g-2类替换自定义的间距规则
  • 这个类会给所有栅格列统一设置左右4px的内边距，相邻两列之间的净间隔为8px，刚好给每个元素两侧各2px的outline预留避让空间，最终相邻元素的描边之间能保持4px的固定净间距，不会发生碰撞
• 拆分尺寸挂载逻辑：不要把硬编码宽高直接写在栅格列上
  • 把原来加在列上的width: 200px/64px、height:150px/48px样式，转移到列内部嵌套的图片容器上，栅格列本身只保留Bootstrap栅格类（col-sm-1/col-sm-3/col-sm-4），完全遵守栅格的流式宽度计算
  • 图片本身的样式保留background-size: cover、2px黄色边框、2px白色描边，加上max-width:100%约束，避免图片撑破列的内边距范围
• 统一盒模型规则：确保所有列元素沿用box-sizing: border-box设置，让黄色边框的宽度不会额外撑破列的布局尺寸，避免总宽度计算偏差导致的居中失效

• 当JS动态把某列替换为更大尺寸的列宽类时，所有列的宽度完全由Bootstrap栅格统一计算，总宽度和容器宽度的计算逻辑完全对齐，justify-content-center可以正常把整个栅格内容居中
• 相邻列的固定间距由g-2统一控制，不管列是小尺寸还是大尺寸，元素之间的间距都保持固定值，不会因为单个列变宽就出现元素碰撞
• outline完全落在列预留的内边距空间内，不会侵入相邻元素的布局区域，从根源上解决描边重叠的问题

内容的提问来源于stack exchange，提问作者xtlc