Next.js页面出现多余横向滚动条问题求助

问题原因分析 #

你的布局存在几个React-Bootstrap栅格的典型使用错误，直接导致了横向溢出：

• 反向嵌套结构：最外层<Row>直接包裹<Container>，React-Bootstrap的Row默认带负左右margin，而Container本身有左右padding，这种嵌套会触发水平滚动条。
• 固定宽度图片：Figure.Image设置了固定width={300}，小屏幕下会超出容器宽度。
• 非响应式内边距：全局生效的ps-5内边距，在窄屏时会挤占内容空间引发溢出。

修复方案 #

1. 修正栅格嵌套逻辑

移除最外层的<Row>，让Container作为根容器的直接子元素（React-Bootstrap标准结构是Container包裹Row，而非反向）。

2. 图片改为响应式

给Figure.Image添加fluid属性，让图片自适应父容器宽度，避免固定尺寸导致的溢出。

3. 替换为响应式内边距

将ps-5改为ps-md-5，仅在中等及以上屏幕尺寸添加左侧内边距，适配窄屏布局。

修正后的完整代码

import { Spinner, Col, Container, Row, Figure } from "react-bootstrap";
import ContinueAsGuest from "../components/mainMenuPage/ContinueAsGuest";
import LastDate from "../components/mainMenuPage/LastDate";
import MainPageForm from "../components/mainMenuPage/MainPageForm";
import { useSelector } from "react-redux";

const HomePage = () => {
  const isLoading = useSelector((state) => state.loading.isLoading);
 
  return (
    <div>
      <Container className="d-flex align-items-center justify-content-center mt-5">
        <Row>
          <Col className="pt-5">
            <Row>
              <Figure>
                <Figure.Image
                  fluid
                  src="https://upload.wikimedia.org/wikipedia/tr/e/ee/Bilkent%C3%9Cniversitesi-logo.png"
                ></Figure.Image>
              </Figure>
            </Row>
            <Row>
              <LastDate></LastDate>
            </Row>
          </Col>
          <Col className="ps-md-5">
            <Row>
              <h1 className="text-primary">Welcome To Erasmus Page</h1>
            </Row>
            <Row className="mt-3">
              <MainPageForm></MainPageForm>
            </Row>
            <Row className="mt-3">
              <ContinueAsGuest></ContinueAsGuest>
            </Row>
          </Col>
        </Row>
      </Container>
      <Row className="d-flex align-items-center justify-content-center mt-5">
        {isLoading && (
          <Spinner
            animation="border"
            variant="primary"
            className="m-5"
            style={{
              width: 200,
              height: 200,
            }}
          />
        )}
      </Row>
    </div>
  );
};

export default HomePage;

额外排查点

如果修改后仍存在滚动条，检查MainPageForm、ContinueAsGuest等子组件是否包含固定宽度的元素（比如设置了非100%的固定数值宽度），这类元素也可能引发横向溢出。

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