Bootstrap嵌套栅格列内图片显示重叠问题如何解决

核心原因 #

• 嵌套栅格列宽配置错误：Bootstrap栅格每一层row都会基于父容器宽度重新按12等分分列，你外层的col-md-6仅占页面整行宽度的50%，其内部嵌套的row总宽度完全和这个父列宽度一致。你给内部两个图片容器设置的col-md-3加起来仅占内部row的6/12也就是一半宽度，单个col-md-3的宽度只有父col-md-6的25%，远小于图片设置的尺寸。
• 固定宽度覆盖响应式规则：你给img标签硬编码了width="300px"的固定宽度属性，该属性会覆盖img-responsive类自带的max-width: 100%自适应样式，图片会直接突破所在列的宽度限制，溢出到相邻列位置造成重叠。

修复步骤 #

• 将内部两个图片容器的类从col-md-3改为col-md-6，两个列宽度加起来刚好占满内部row的12份栅格额度，实现两图等宽平分父列空间的效果。
• 移除img标签上硬编码的width="300px"固定宽度属性，保留img-responsive类，让图片自动适配所在列的宽度，不会发生溢出。桌面端视口下col-md-6的宽度足够支撑图片展示到接近300px的显示效果，不需要手动写死宽度。

修复后的代码如下：

<div class="col-md-6">
    <ul>
        <li>
            用户长按单元格时，会弹出操作提示框，支持三个操作选项：修改对应条目名称、删除条目、取消关闭提示框
        </li>
    </ul>

    <div class="row">
        <div class="col-md-6">
            <img src="images/ListMakeriOS/edit_or_cancel.png" alt="长按初始弹出对话框" class="img-responsive">
        </div>
        <div class="col-md-6">
            <img src="images/ListMakeriOS/edit.png" alt="长按后选择编辑选项的效果" class="img-responsive">
        </div>
    </div>
</div>

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