Bootstrap网格行宽度溢出问题咨询（未自定义CSS）

这事儿核心是Bootstrap网格系统的默认内外边距设计：

• .row类默认带了margin-left: -15px; margin-right: -15px;的负外边距
• 它的直接子元素.col-*系列类，默认有padding-left: 15px; padding-right: 15px;的内边距

这套设计本来是和Bootstrap的容器类（.container或.container-fluid）配合用的：

.container和.container-fluid默认都有左右各15px的内边距，.row的负外边距刚好抵消掉容器的内边距，再加上列的正内边距，就能让列里的内容既对齐容器边缘，又能保证列之间有合适的间距。

但如果你没把.row放在.container/.container-fluid里面，就没东西抵消.row的负外边距了——这时候.row就会往左右两边各多出15px，直接超出父元素的宽度，自然就出现横向溢出和滚动条了。

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