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></section> 或 <div> 等无约束容器中（如问题中的代码），<code>.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" alt=""></div>
<div class="item"><img src="img2.jpg" alt=""></div>
</div>
</section>⚠️ 注意事项：
- 不要试图通过
body { overflow-x: hidden }或.row { overflow: hidden }强制隐藏滚动条——这属于“掩耳盗铃”，会掩盖布局缺陷，且可能影响移动端横向滑动体验； - 若需全宽布局（如横幅轮播），应使用
.container-fluid替代.container，但仍不可省略容器层； - 检查所有
.row是否均有合法父容器，可通过浏览器开发者工具的“Computed”面板查看margin-left/right是否为负值且未被抵消； - Owl Carousel 初始化后会动态添加
.owl-stage等结构，但其默认width: max-content不会导致溢出——除非外部父容器已失衡。
总结：水平滚动条是 Bootstrap 栅格“未闭合”的典型症状。修复核心在于遵循官方文档的嵌套规范：.container → .row → .col-*。一旦容器层级正确，Owl Carousel 即可正常渲染，无需额外 CSS 干预。
