调试时缩小站点尺寸，body无法占满100%屏幕宽度的问题

问题现象 #

• 调试页面缩小尺寸时，body无法占满屏幕100%宽度
• 删除Bootstrap类后页面恢复正常，添加body{width: 100%}无效果，移除p-md-4类后间隙有所减小

问题原因 #

直接给<header>加row类是核心问题——Bootstrap的row类默认带有负左右外边距（margin-left: -0.75rem; margin-right: -0.75rem;），会让元素超出视口范围，导致body无法撑满宽度，p-md-4这类内边距类会进一步凸显这个视觉问题。

解决方案 #

方案1：用容器类包裹row

给row外层添加container-fluid（或container，根据布局需求选择），Bootstrap容器类会自动抵消row的负外边距，保证布局适配不同屏幕：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container-fluid">
  <header class="row align-items-center bg-primary">
    <div class="col-md-3 col-sm-6 col-12 mt-md-0 mt-0 p-md-4 ms-md-2 ms-3 p-3">
      test
    </div>
  </header>
</div>

方案2：手动消除row的负外边距

如果不需要容器类，可通过Bootstrap内置类或自定义样式去掉row的负外边距：

• 使用Bootstrap内置类：给header添加mx-0

<header class="row align-items-center bg-primary mx-0">
  <!-- 内部元素保持不变 -->
</header>

• 自定义CSS：

header.row {
  margin-left: 0;
  margin-right: 0;
}

内容的提问来源于stack exchange，提问作者Adam Małysz