如何排查并确保子HTML元素不溢出Bootstrap列容器

子元素溢出Bootstrap col-md-8 容器排查步骤 #

• 检查栅格层级是否合规：Bootstrap的col-*类元素必须直接嵌套在row类元素内，row必须嵌套在container或container-fluid类元素内，层级错误会导致列的宽度、内边距计算异常，引发溢出。
• 检查子元素是否设置固定宽度：如果子元素写死了固定width属性，且数值大于col-md-8的实际渲染宽度，会直接溢出，可将固定宽度改为百分比宽度，或添加max-width: 100%限制最大宽度。
• 检查盒模型与边距设置：如果子元素的box-sizing被改为content-box，额外设置的padding、border会叠加在宽度上导致总宽度超出，可将子元素的盒模型改回border-box（Bootstrap默认全局配置了该属性，手动重置过需要改回），同时排查左右margin是否过大。
• 检查内容是否为不可换行的长内容：如果子元素是长文本、无空格的长链接、代码块这类内容，默认不会自动换行导致溢出，可添加以下样式处理：

  word-wrap: break-word;
  word-break: break-all;
  overflow-wrap: break-word;
  

  如果是图片、视频等媒体元素溢出，给媒体元素添加max-width: 100%; height: auto;即可，也可以直接使用Bootstrap自带的img-fluid类处理图片溢出。
• 检查布局属性异常：如果子元素设置了浮动且未清除，或者flex布局的子元素flex-shrink属性为0，也会引发溢出。浮动问题可以给父容器添加overflow: hidden或者使用clearfix类清除浮动；flex布局可以给子元素添加flex-shrink: 1或者限制最大宽度。
• 用开发者工具快速定位：给父容器临时添加overflow: hidden隐藏溢出内容后，用浏览器开发者工具的元素选择器选中子元素，查看盒模型面板的宽度、边距、边框等计算值，和父容器的宽度对比，可快速定位超出的数值来源。

通用强制适配方案 #

如果不需要展示溢出内容，可以直接给父col-md-8容器添加以下样式，强制子元素不超出容器范围：

.col-md-8 {
  overflow-x: hidden;
  max-width: 100%;
}

如果需要允许用户滚动查看溢出内容，将overflow-x: hidden改为overflow-x: auto即可。

内容的提问来源于stack exchange，提问作者Fakhar Ahmad Rasul