Bootstrap 5移除container-fluid左右内边距并避免横向滚动

问题根源是Bootstrap的row组件默认带有左右负margin，当你给container-fluid添加px-0移除内边距后，row的负margin会让内容超出视口范围，从而触发横向滚动条。以下是几种可行的解决方法：

方案1：重置row的左右margin #

给row添加mx-0类抵消默认负margin，同时给col-12加p-0去掉默认内边距，让图片完全贴合宽度：

<div class="container-fluid px-0">
    <div class="row d-none d-md-block mx-0">
        <div class="col-12 p-0">
            <img src="~/images/banners/group_full.png" alt="Image of a group of people" class="img-fluid" />
        </div>
    </div>
</div>

方案2：隐藏横向溢出 #

给最外层的container-fluid添加overflow-x-hidden类，直接隐藏超出视口的横向内容：

<div class="container-fluid px-0 overflow-x-hidden">
    <div class="row d-none d-md-block">
        <div class="col-12">
            <img src="~/images/banners/group_full.png" alt="Image of a group of people" class="img-fluid" />
        </div>
    </div>
</div>

方案3：调整内边距的移除层级 #

保留container-fluid的默认内边距，转而给row和col-12添加px-0移除它们的内边距，避免row负margin引发的溢出：

<div class="container-fluid">
    <div class="row d-none d-md-block px-0">
        <div class="col-12 px-0">
            <img src="~/images/banners/group_full.png" alt="Image of a group of people" class="img-fluid" />
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者A.Mac