给Bootstrap 3×3网格div加margin后页面横向变宽，如何固定页面尺寸移动div

原因说明 #

margin 是盒模型的外部间距属性，会直接增加元素在文档流中占据的总宽度。你给 .col-4 设置了 10px 左外边距后，每个元素的总占位宽度变为 100px 内容宽 + 10px 左外边距，3 个元素一行的总宽度超出了原有容器的承载范围，就会把页面横向撑开。

最优解决方案 #

使用 transform: translate() 实现元素位置偏移，该属性只会修改元素的视觉展示位置，不会改变元素在文档流中的占位尺寸，完全不会影响页面整体大小，修改后的代码如下：

.col-4 {
  background-color: black;
  width: 100px;
  height: 100px;
  /* 替换原有margin属性，第一个值对应水平偏移（替代margin-left），第二个值对应垂直偏移（替代margin-top） */
  transform: translate(10px, 10px);
}

.container {
  margin: 100px 0 0 300px;
}

备选方案（需要保留margin的场景） #

如果业务场景必须使用margin实现间距，可以把样式写在.col-4的内部子元素上，不修改Bootstrap原生栅格列的margin属性，避免破坏栅格系统的宽度计算：

<body>
    <div class="container">
        <div class="row">
            <div class="col-4" id="square_1">
                <div class="square-item"></div>
            </div>
            <div class="col-4" id="square_2">
                <div class="square-item"></div>
            </div>
            <div class="col-4" id="square_3">
                <div class="square-item"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-4" id="square_4">
                <div class="square-item"></div>
            </div>
            <div class="col-4" id="square_5">
                <div class="square-item"></div>
            </div>
            <div class="col-4" id="square_6">
                <div class="square-item"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-4" id="square_7">
                <div class="square-item"></div>
            </div>
            <div class="col-4" id="square_8">
                <div class="square-item"></div>
            </div>
            <div class="col-4" id="square_9">
                <div class="square-item"></div>
            </div>
        </div>
    </div>
</body>

.square-item {
  background-color: black;
  width: 100px;
  height: 100px;
  margin: 10px 0 0 10px;
}
.container {
  margin: 100px 0 0 300px;
}

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