Bootstrap 5组合使用justify-content-center与container-fluid出现居中异常

问题根因 #

你的代码存在3处栅格使用错误，共同导致小视口下内容偏移：

• 外层元素同时绑定row和container-fluid类，违反Bootstrap栅格容器>行>列的标准嵌套规则，row自带的负margin和container-fluid的padding冲突，小视口下布局计算异常。
• 内部列仅指定了col-lg-8，没有明确小视口下的列宽规则，部分场景下会出现宽度计算偏差。
• 内部列绑定的m-3会在所有视口下生效，小视口下本应占满12列的容器被左右margin挤压，出现宽度不足、位置偏移的问题。

修复代码 #

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="main-container p-3 my-3 col-12 col-lg-8">
            (text)
        </div>
    </div>
</div>

修改说明 #

• 拆分container-fluid和row为嵌套结构，符合栅格标准层级，避免样式冲突。
• 给列补充col-12声明，明确小于lg断点的所有视口下，列自动占满12列宽度。
• 将m-3替换为my-3，仅保留上下间距，移除会挤压宽度的左右margin；如果需要左右留白，可额外添加px-3内边距，不会影响容器宽度计算。

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