如何移除HTML+CSS网页中的水平滚动条？

问题分析 #

你的代码基于Bootstrap框架，出现水平滚动条的核心原因有两个：

1. <div class="row"> 未包裹在 .container/.container-fluid 内部——Bootstrap的row默认带有左右负margin，脱离container会直接导致内容超出视口宽度。
2. RTL布局下的内边距设置冲突：ps-0（左内边距清零）在RTL模式下不符合布局逻辑，可能和其他元素的内边距叠加导致溢出。

具体解决方案 #

方案1：修正Bootstrap布局结构（推荐）

严格遵循Bootstrap布局规则，将row移入container内，并调整RTL适配的内边距类：

<html lang="FA">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 确保引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body dir="rtl">
    <section class="bg-blue">
        <div class="container">
            <div class="text-center">
                <img src="logo.png" alt="">
                <h2 class="logo-text d-inline-block p-4 pe-0">My logo text</h2>
                <!-- RTL布局下改用pe-0替代ps-0，清除右侧内边距 -->
            </div>
            <!-- 将row移至container内部，抵消row的负margin -->
            <div class="row">
                <div class="col-12">
                    <img src="" alt="" class="w-100">
                    <!-- 添加w-100确保图片不超出容器宽度 -->
                </div>
            </div>
        </div>
    </section>
    <section class="bg-secondary">
        <div class="container">
            <div class="text-center" style="height: 800px;">
                <div class="search-container">
                    <div class="search-form">
                        <input type="text" class="form-control search-field w-50" placeholder="search">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer class="bg-yellow">
        <div class="container">
          
        </div>
    </footer>
</body>
</html>

方案2：全局兜底处理（临时应急）

如果暂时无法调整布局，可添加全局CSS强制隐藏水平滚动条（仅治标，不推荐长期使用）：

body {
    overflow-x: hidden;
}

关键注意事项 #

• Bootstrap布局强制规则：所有 .row 必须直接嵌套在 .container/.container-fluid 内部，否则负margin会触发水平溢出。
• RTL布局适配：Bootstrap的方向类需对应调整，ps-*（左内边距）改为pe-*（右内边距），ms-*改为me-*，避免布局方向冲突。
• 图片自适应：给图片添加w-100类，确保其宽度不超过父容器。

内容的提问来源于stack exchange，提问作者Mohadeseh