Layout布局在移动端显示错乱怎么办？

程序猿树潼提问于 2026-03-27 20:02:22 阅读 4

组件

我用 Ant Design 的 Layout 组件搭了个后台页面，PC 上看着没问题，但一到手机上整个布局就塌了，侧边栏没隐藏还挤在一起，根本没法用。

我试过加 responsive 样式，也看了文档说要配合 useBreakpoint，但还是不行。是不是我写法有问题？

import { Layout, Menu } from 'antd';
const { Header, Sider, Content } = Layout;

function App() {
  return (
    <Layout>
      <Sider breakpoint="lg" collapsedWidth={0}>
        <Menu theme="dark" mode="inline" />
      </Sider>
      <Layout>
        <Header>Header</Header>
        <Content>Content</Content>
      </Layout>
    </Layout>
  );
}

布局组件

我来解答赞 0 收藏

反馈

1 条解答

星辰 Lv1

你得在 Sider 上加个 collapsed 属性控制收起状态，再用 useBreakpoint 监听宽度变化。直接这样：

import { Layout, Menu } from 'antd';

import { useState } from 'react';

import { useBreakpoint } from 'antd/lib/responsiveObserver';



function App() {

  const screens = useBreakpoint();

  return (

    

      

        

      

      

        Header


        Content

      

    

  );

}

记得把 collapsed 和断点逻辑关联起来，不然移动端显示肯定乱。这破玩意儿调试起来真累人。

2026-03-27 20:04