Bootstrap流体网格容器右侧溢出问题排查求助

问题根源在于.container-fluid默认的width: 100%属性——当你给它添加左右margin后，元素总宽度会超出视口宽度，导致右侧溢出。结合你需要容器居中、内部保持fluid网格布局的需求，可按以下方案修复：

方案一：自定义CSS调整容器尺寸与位置 #

修改你的CSS，通过calc()计算容器宽度，同时设置margin: auto实现居中：

.container-fluid {
  width: calc(100% - 4vw); /* 减去左右各2vw的间距，避免溢出 */
  margin: 1vw auto; /* 上下保留1vw间距，左右自动居中 */
  padding: 0;
  background: pink;
}

该设置既保证容器不会超出视口，又能让它居中显示，内部的网格布局依然保持fluid的自适应特性。

方案二：使用Bootstrap原生工具类（更推荐） #

如果想避免自定义CSS引发的样式冲突，可在外层套一个容器，用Bootstrap自带的间距类提供页面边框与容器的间距：

<div class="px-4"> <!-- 外层容器提供左右间距，可根据需求替换为px-5、px-lg-6等 -->
  <div class="container-fluid">
    <!-- 你的网格内容 -->
  </div>
</div>

额外修复：无效的margin类 #

你代码中的ml-12和mr-12是无效的——Bootstrap 5中没有该类，且已用ms-*（margin-start）和me-*（margin-end）替代旧的ml-*/mr-*命名。如果需要给列之间添加间距，建议给.row使用g-*类：

<div class="row g-3"> <!-- 列之间添加统一间距，数值可按需调整 -->
  <div class="col-sm-12 col-md-6 col-lg-4">
    <!-- 内容 -->
  </div>
  <div class="col-sm-12 col-md-6 col-lg-8">
    <!-- 内容 -->
  </div>
</div>

内容的提问来源于stack exchange，提问作者Matheus Caetano Rocha