为何我的Bootstrap断点宽度与标准尺寸不符？

问题说明 #

我在学习Bootstrap 4栅格系统时，使用了官方文档的示例代码：

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

同时添加了自定义CSS：

.row {
  background: #f8f9fa;
  margin-top: 20px;
  margin-left: 10px;
  margin-right: 10px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.col-sm {
  border: solid 1px #6c757d;
}

根据官方文档，sm对应的断点是**>=576px**，但实际渲染时，断点却在593px才触发，列才会并排显示，和预期不符。

原因分析 #

问题出在自定义的.row左右margin上：

1. Bootstrap栅格的默认逻辑：.container在sm断点（576px）时的宽度为540px（断点宽度减去容器默认的左右padding各15px）；.row默认带有margin-left: -15px和margin-right: -15px，用来抵消.col的左右padding，保证栅格内容和容器边缘对齐。
2. 自定义margin破坏布局：给.row设置的margin-left: 10px和margin-right: 10px覆盖了默认负margin。当视口宽度为576px时，浏览器垂直滚动条会占用约17px宽度（不同浏览器略有差异），实际可用内容区域宽度为576-17=559px，而row加上左右margin后的总宽度为540+20=560px，超过了内容区域宽度，导致列被迫换行。只有当视口宽度达到576+17=593px时，内容区域宽度才满足布局需求，列才会并排显示。

解决办法 #

方案一：恢复Bootstrap默认布局 #

直接移除.row的自定义左右margin，保留其他样式：

.row {
  background: #f8f9fa;
  margin-top: 20px;
  /* 移除自定义的左右margin */
  /* margin-left: 10px; */
  /* margin-right: 10px; */
}

修改后sm断点会在576px正常触发，符合官方文档预期。

方案二：用padding替代margin实现间距 #

如果需要给row添加左右间距，不要修改row的margin，而是给外层容器或额外包裹div添加padding，避免破坏栅格逻辑：

/* 给容器添加内边距实现间距 */
.container {
  padding-left: 10px;
  padding-right: 10px;
}

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