Bootstrap 4网格自适应：右侧列缺失时左侧内容占满全宽

针对右侧列动态缺失时的栅格自动适配需求，不需要复杂的嵌套判断，可通过两种稳定方案实现：

纯CSS无脚本方案（优先推荐） #

完全依托CSS伪类匹配DOM结构状态，不需要JS判断页面渲染内容，零成本实现自动适配：

1. 重构基础类绑定，避免硬编码固定宽度
   • 左侧图片列添加标识类，绑定基础响应式宽度：col-12 col-md-6 gallery-col
     该类的效果是移动端默认占满全宽，桌面端（≥768px）默认占50%宽度，匹配有右侧列的初始布局
   • 内部图片容器保留标准.row类，每个图片项绑定初始宽度：col-6 col-sm-4 col-md-4 gallery-item
     该类的效果是在左侧列占50%宽度的场景下，内部每行排布3张图，两行刚好放完6张图，符合原有设计
2. 追加自定义样式，匹配无右侧列的场景
   当右侧列被移除、不参与DOM渲染时，.row容器下的直接子元素只有gallery-col一个，此时通过伪类:only-child触发样式替换：

   /* 无右侧列时，左侧列撑满桌面端全宽 */
   @media (min-width: 768px) {
     .row > .gallery-col:only-child {
       flex: 0 0 100%;
       max-width: 100%;
     }
     /* 左侧列全宽时，内部图片调整为col-2宽度 */
     .row > .gallery-col:only-child .gallery-item {
       flex: 0 0 16.666%;
       max-width: 16.666%;
     }
   }
   

   上述样式的断点阈值和Bootstrap 4默认的md档断点完全一致，不会出现响应式错位。匹配效果为：只要右侧列不存在，左侧列自动占满全宽，内部6张图自动调整为每行6张、均匀排布的col-2宽度。

JS动态类切换方案 #

如果右侧列是通过前端逻辑动态渲染/删除，不想写自定义CSS，可通过类名替换实现：

1. 左侧列、内部图片项绑定基础类同上，给右侧列加标识类content-col
2. 在DOM渲染完成后加一段判断逻辑，检测右侧列是否存在，动态替换宽度类：

   const rightCol = document.querySelector('.content-col');
   const leftCol = document.querySelector('.gallery-col');
   const galleryItems = document.querySelectorAll('.gallery-item');
   
   // 右侧列不存在时，切换栅格宽度类
   if (!rightCol) {
     leftCol.classList.replace('col-md-6', 'col-md-12');
     galleryItems.forEach(item => {
       item.classList.replace('col-md-4', 'col-md-2');
     })
   }
   

避坑提示 #

• 不要在同一元素上同时绑定col-md-6和col-md-12两个冲突宽度类，会因CSS优先级错乱导致样式失效
• 嵌套栅格时不要漏写内部容器的.row类，否则栅格宽度计算会受左右负margin缺失的影响出现偏移
• 自定义CSS的媒体查询阈值要和使用的Bootstrap版本断点保持一致，避免不同尺寸下的布局错位

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