Bootstrap嵌套Row宽度异常问题求助

问题原因 #

Bootstrap的.row默认自带左右负边距，设计目的是抵消列（.col-*）的内边距，让列内内容与容器边缘对齐。但你直接将.row放在自定义的#wrapper中，而#wrapper未设置左右内边距来抵消.row的负边距，导致嵌套的.row和#side的背景超出了#wrapper的范围。

修复方案 #

方案1：改用Bootstrap的.container类包裹（推荐）

Bootstrap的.container类自带适配的左右内边距，刚好能抵消.row的负边距，同时保留你的自定义样式：

修改CSS：

#wrapper {
  background: yellow;
  max-width: 500px;
}

修改HTML的#wrapper部分：

<div id="wrapper" class="container">
    <div class="row">
        <!-- 后续内容保持不变 -->
    </div>
</div>

方案2：给自定义#wrapper添加内边距

如果不想用.container类，直接给#wrapper添加左右内边距，抵消.row的负边距：

#wrapper {
  background: yellow;
  max-width: 500px;
  margin: 0 auto;
  padding-left: 1rem; /* 数值匹配Bootstrap默认.row负边距大小 */
  padding-right: 1rem;
}

额外说明 #

Bootstrap网格系统严格遵循「容器（container）→ 行（row）→ 列（col）」的层级结构，嵌套的.row必须放在列（.col-*）内部，这样它的负边距只会抵消列的内边距，不会超出容器范围。

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