使用Bootstrap v5.1.3开发站点时多段落内容宽度溢出出现横向滚动条如何解决

问题原因 #

导致横向滚动条的核心原因是外层容器的宽度设置错误：

• 你给wrapper元素加了min-vw-100类，该类会强制元素最小宽度等于完整视口宽度。当页面内容过长出现纵向滚动条时，纵向滚动条会占据部分视口宽度，导致wrapper的实际宽度超出可见区域，触发横向滚动。

纯Bootstrap v5.1.3 解决方案 #

不需要修改自定义CSS，仅调整HTML中自带的Bootstrap类即可解决：

1. 移除wrapper元素上的min-vw-100类，替换为w-100类：w-100会让元素宽度自动适配父元素的可用宽度，不会强制占满包含滚动条的全视口，自然避开溢出问题。
2. 可选优化：如果希望段落文本在宽屏上不会一行过长影响阅读，可以把包裹段落的container-fluid类替换为container类，Bootstrap会自动根据屏幕尺寸设置合适的最大宽度和左右边距，响应式效果更好。
3. 如果存在长单词/长字符串导致的溢出，可给所有段落<p>标签加text-break类，自动断开长文本换行。

修改后的wrapper代码示例：

<div class="d-flex flex-column min-vh-100 w-100 wrapper">

修改后的段落容器代码示例（可选优化版）：

<div class="container my-auto">
  <p class="h6 text-break">
    段落内容
  </p>
</div>

完成以上调整后，页面横向滚动条会消失，所有段落会自动适配屏幕宽度，不会溢出。

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