自定义裁剪Bootstrap后col-xs列溢出容器，缺失了什么配置？

缺失的核心配置 #

你漏掉了Bootstrap栅格系统的3个配套基础规则：

• 全局box-sizing: border-box盒模型重置规则
• container的左右内边距配置
• row的左右负外边距、以及.col-xs-*的左右内边距配套配置

Bootstrap原生栅格的底层逻辑 #

Bootstrap的栅格是三层嵌套结构，逻辑完全配套：

1. 最外层container/container-fluid：默认设置左右各15px内边距，且全局盒模型为border-box，保证内边距不会撑大容器本身的设定宽度，内部内容的计算基准为container扣除padding后的内容区宽度
2. 中间层row：设置左右各-15px的负外边距，刚好抵消外层container的左右padding，让row的边缘和container的内容区边缘完全对齐
3. 内层.col-*：设置左右各15px的内边距（即栅格间距gutter），百分比宽度基于父级row的宽度计算，且border-box规则保证内边距不会额外增加列的设定宽度

具体修改步骤 #

1. 先添加全局盒模型重置，建议写在项目全局样式文件中：

*, *::before, *::after {
  box-sizing: border-box;
}

2. 完善container样式：

.container {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
  /* 你的自定义样式比如蓝色边框可以加在这里 */
  /* 按需添加各断点的max-width限制，比如sm断点540px、md断点720px等 */
}

3. 完善row样式：

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

4. 完善.col-xs-*的基础样式和宽度规则：

[class*="col-xs-"] {
  position: relative;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

.col-xs-1 { width: 8.333333%; }
.col-xs-2 { width: 16.666667%; }
.col-xs-3 { width: 25%; }
.col-xs-4 { width: 33.333333%; }
.col-xs-5 { width: 41.666667%; }
.col-xs-6 { width: 50%; }
.col-xs-7 { width: 58.333333%; }
.col-xs-8 { width: 66.666667%; }
.col-xs-9 { width: 75%; }
.col-xs-10 { width: 83.333333%; }
.col-xs-11 { width: 91.666667%; }
.col-xs-12 { width: 100%; }

如果你是在Angular组件内写的局部样式，注意全局盒模型重置不要写在组件样式中，要写到angular.json配置的全局样式文件里，避免组件视图封装导致规则不生效。

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