记录 HTML 页面宽度溢出的调试与解决

前段时间仿了个电商站将其做成 opencart 主题，谈不上 100% 还原，大概也就 70% 左右。因为要适配 Opencart 模板，需要制作多个 模块(module)，而不得不有所取舍，大致还算满意。所不足者，页面实际宽度略大于屏幕宽度，因该模板只有在一个试验性站点中使用，且后来身体微恙需要治疗而不得闲，直到近日，方借助 kimi 进行排查。先将排查处理过程记录，以备后用。

首先，打开浏览器对应页面，调出控制台，使用类似以下代码对 body 之下的容器进行描边:

document.querySelectorAll('body, body *').forEach(el=>el.style.border=`1px solid #ff0000`)

尝试用可视化的方式排查那些容器造成的屏幕溢出。似乎并没有那么明显。

将网站链接直接扔给 kimi，让其帮忙诊断。kimi 提示：

1. Bootstrap 的 .row 默认有 margin-left: -0.75rem 和 margin-right: -0.75rem。当 .row 直接放在没有左右 padding 的容器内时，负边距会导致内容溢出屏幕宽度。.row 内的如果没有被 .container 或 .container-fluid 包裹，负边距会导致溢出。后经过验证，1) 在 class="row" 加入 g-0 变成 class="row g-0"；2）或者在 .row 外层嵌套上 .container-fluid（或 container）能有效解决此类问题。
2. 不过实际调试时，通过屏幕下的左右滑块感知，实际页面宽度稍有减少，却并没有完全消除掉多出来的部分。于是尝试删除部分容器以查验还有哪些容器导致溢出，最终锁定 banner 幻灯片的 previous/next 按钮上：

.carousel:hover .carousel-control-prev {
    opacity: 0.7;
    left: 0px;
}

 .carousel .carousel-control-prev {
    opacity: 0;
    left: -20px;
}

.carousel:hover .carousel-control-next {
    opacity: 0.7;
    right: 0px;
}

 .carousel .carousel-control-next {
    opacity: 0;
    right: -20px;
}

想来其中的 -20px 是兆因，按 kimi 提示加入如下代码后得以解决：

.carousel {
   overflow: hidden;
} 

好记性不如烂笔头，特此记录。