使用Bootstrap绝对定位元素溢出产生横向滚动条如何解决

解决方案 #

出现横向滚动条的核心原因是绝对定位元素偏移后超出父容器可见范围，默认不会被裁剪，直接撑宽了页面可视区，按以下步骤修改即可：

1. 全局兜底限制横向溢出
   给html、body添加如下样式，从根节点禁止页面出现横向滚动条：

html, body {
  overflow-x: hidden;
}

2. 给图片定位上下文容器添加裁剪规则
   你已经给.landing .right .image设置了position: relative作为绝对定位的上下文，给它追加溢出隐藏和高度规则，内部偏移超出的图片部分会被直接裁剪：

.landing .right .image {
  position: relative;
  overflow: hidden;
  height: 700px; /* 可根据你的图片实际高度调整数值，解决内部绝对定位元素导致的父容器高度塌陷问题 */
}

3. 修正Bootstrap栅格的默认边距问题
   Bootstrap的.row类默认自带margin-left: -15px; margin-right: -15px的负边距，你已经给.landing设置了margin-right:0，补全左侧边距规则即可：

.landing {
  padding-bottom: 100px;
  margin-right: 0;
  margin-left: 0;
}

补充说明 #

你之前写原生CSS没遇到同类问题，是因为Bootstrap的栅格默认规则和自定义原生布局规则存在差异，你写原生布局时大概率默认给根节点加过横向溢出隐藏规则，所以没有触发过这类问题。

如果需要保留偏移效果还想进一步降低溢出概率，可以把代码里的left: 100px替换为transform: translateX(100px)，transform属性的偏移不会触发元素盒模型的占位计算，不会额外撑宽容器。

内容的提问来源于stack exchange，提问作者Ali-Jabowr