如何修复 Owl Carousel 导致浏览器水平滚动条意外出现的问题

Owl Carousel 本身通常不会引发水平滚动条，问题根源在于 Bootstrap 网格系统使用不当——未将 .row 包裹在 .container 或 .container-fluid 内，导致行元素超出视口宽度，触发浏览器默认水平溢出。

Owl Carousel 本身通常不会引发水平滚动条，问题根源在于 Bootstrap 网格系统使用不当——未将 `.row` 包裹在 `.container` 或 `.container-fluid` 内，导致行元素超出视口宽度，触发浏览器默认水平溢出。

在 Bootstrap 4+ 中，.row 类默认应用了负外边距（margin-left: -15px; margin-right: -15px），其设计前提是必须嵌套在 .container（固定宽度居中）或 .container-fluid（100% 宽度）内。若直接将 .row 放在无容器约束的父元素中（如 <section> 直接子元素），负边距会突破父容器边界，造成整体内容宽度超过 100vw，从而强制浏览器显示水平滚动条——这正是你在 demo site 中观察到的现象（位于“Tekintse meg képgalériánkat”标题下方的 carousel 区域）。

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

<section class="my-5"><div class="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><!-- 此处放置你的 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></div></section>

注意事项：

1. 不要试图通过 overflow-x: hidden 强制隐藏滚动条——这仅掩盖症状，无法解决根本布局溢出问题，还可能影响可访问性与响应式行为；
2. 检查所有使用 .row 的位置，确保每个 .row 都严格嵌套在 .container 或 .container-fluid 内；
3. 若需全宽布局，改用 .container-fluid，但仍需包裹 .row；
4. Owl Carousel 初始化后会自动添加 .owl-stage-outer 等结构，但只要外部容器宽度合规，其内部 overflow 处理（如 overflow: hidden）即可正常生效。

总结：水平滚动条不是 Owl Carousel 的 Bug，而是 Bootstrap 布局规范未被遵守的典型表现。修正容器层级关系，即可一劳永逸解决问题，同时提升代码健壮性与可维护性。