如何修复因 Bootstrap 网格缺失容器导致的浏览器水平滚动条异常显示

Owl Carousel 本身不会引发水平滚动条，真正原因是未将 .row 正确包裹在 .container 或 .container-fluid 内，导致 Bootstrap 的负边距（margin-left: -15px; margin-right: -15px）溢出视口，触发浏览器强制显示水平滚动条。

Owl Carousel 本身不会引发水平滚动条，真正原因是未将 `.row` 正确包裹在 `.container` 或 `.container-fluid` 内，导致 Bootstrap 的负边距（`margin-left: -15px; margin-right: -15px`）溢出视口，触发浏览器强制显示水平滚动条。

在 Bootstrap 4（及后续版本）的栅格系统中，.row 类默认应用了左右各 -15px 的外边距（margin: 0 -15px），其设计初衷是抵消 .col-* 子元素的 15px 内边距（padding），从而实现无缝列对齐。但这一机制严格依赖 .row 必须嵌套在 .container（固定宽度居中）或 .container-fluid（全宽）之内——因为容器类会提供左右各 15px 的内边距（padding: 0 15px），恰好中和 .row 的负边距。

若直接将 .row 放在 <section> 或 <div> 等无约束容器中（如问题中的代码），.row 的 margin-left: -15px 就会向左“溢出”文档流边界，导致整个页面宽度超出视口，浏览器因此自动显示水平滚动条——这与 Owl Carousel 无关，即使移除轮播组件，问题依然存在。

✅ 正确写法（推荐使用 .container）：

<section class="my-5"><div class="container"> <!-- ✅ 关键：添加 container --><div class="row"><div class="col"><div class="module-head"><div class="module-head-title">Tekintse meg képgalériánkat</div></div></div></div></div><!-- Owl Carousel 代码（可保持原样） --><div class="owl-carousel owl-theme"><div class="item"><img src="img1.jpg" ></div><div class="item"><img src="img2.jpg" ></div></div></section>

注意事项：

1. 不要试图通过 body { overflow-x: hidden } 或 .row { overflow: hidden } 强制隐藏滚动条——这属于“掩耳盗铃”，会掩盖布局缺陷，且可能影响移动端横向滑动体验；
2. 若需全宽布局（如横幅轮播），应使用 .container-fluid 替代 .container，但仍不可省略容器层；
3. 检查所有 .row 是否均有合法父容器，可通过浏览器开发者工具的“Computed”面板查看 margin-left/right 是否为负值且未被抵消；
4. Owl Carousel 初始化后会动态添加 .owl-stage 等结构，但其默认 width: max-content 不会导致溢出——除非外部父容器已失衡。

总结：水平滚动条是 Bootstrap 栅格“未闭合”的典型症状。修复核心在于遵循最新文档的嵌套规范：.container → .row → .col-*。一旦容器层级正确，Owl Carousel 即可正常渲染，无需额外 CSS 干预。