小屏幕下主内容被侧边栏覆盖？Bootstrap5+React修复方案

问题 #

需求：实现一个250px宽的col-2侧边栏与col-10主内容区，小屏幕时侧边栏折叠为顶部导航栏，主内容置于下方。
问题：屏幕尺寸变化时主内容跑到侧边栏下方。
技术栈：Bootstrap v5.3.0-alpha1、React

当前实现代码：

import React, { useState, useEffect } from "react";

export function Holders() {
    const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);

    useEffect(() => {
        const handleResize = () => {
            setIsSidebarCollapsed(window.innerWidth < 1026);
        };

        window.addEventListener('resize', handleResize);
        handleResize();
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    return (
        <div className="container-fluid">
            <div className="row">
                {isSidebarCollapsed ? (
                    <>
                        <nav className="navbar navbar-light bg-light">
                            <span className="navbar-brand mb-0 h1">Collapsed Sidebar</span>
                        </nav>
                        <div className="col-12">
                            main content w top navbar here
                        </div>
                    </>
                ) : (
                    <>
                        <div className="col-md-2" style={{ width: 250, height: '100vh', backgroundColor: 'yellow', overflowY: 'auto' }}>
                            sidebar content here
                        </div>
                        <div className="col-md-10">
                            <h1>Main Content</h1>
                            main content w sidebar here
                        </div>
                    </>
                )}
            </div>
        </div>
    );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

修复方案 #

问题根源 #

1. 手动设置的width:250px和Bootstrap栅格类col-md-2冲突，栅格类是按父容器比例分配宽度，硬写固定宽度会破坏流式布局逻辑，导致屏幕变化时主内容错位。
2. 折叠状态的导航栏直接放在row容器内，Bootstrap的row仅用于包裹栅格列（col-*），导航栏不属于栅格列，会打乱布局结构。

具体修复步骤 #

• 移除侧边栏的width:250px行内样式，改用flex:0 0 250px+maxWidth:250px实现固定宽度，同时保留栅格类的响应式特性。
• 将折叠导航栏移出row，放在container-fluid最外层，用d-md-none控制仅小屏幕显示。
• 删掉自定义的窗口监听逻辑，改用Bootstrap原生响应式类（d-none d-md-block）控制侧边栏的显示隐藏，依赖框架断点系统更可靠。

修改后的代码 #

import React from "react";

export function Holders() {
    return (
        <div className="container-fluid p-0">
            {/* 小屏幕顶部导航栏，仅md及以下尺寸显示 */}
            <nav className="navbar navbar-light bg-light d-md-none">
                <span className="navbar-brand mb-0 h1">Collapsed Sidebar</span>
            </nav>
            
            <div className="row m-0">
                {/* 大屏幕固定宽度侧边栏，仅md以上尺寸显示 */}
                <div className="col-md-2 d-none d-md-block" style={{ 
                    height: '100vh', 
                    backgroundColor: 'yellow', 
                    overflowY: 'auto',
                    flex: '0 0 250px',
                    maxWidth: '250px'
                }}>
                    sidebar content here
                </div>
                
                {/* 主内容区：大屏幕占10列，小屏幕占满整行 */}
                <div className="col-md-10 col-12">
                    <h1>Main Content</h1>
                    main content here
                </div>
            </div>
        </div>
    );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

说明 #

• 利用Bootstrap的d-*响应式类实现布局切换，无需手动监听窗口大小，逻辑更简洁。
• 固定宽度侧边栏通过flex属性实现，不会破坏栅格系统的布局规则，屏幕尺寸变化时主内容能始终保持正确位置。
• 主内容区同时设置col-md-10和col-12，自动适配不同屏幕尺寸的布局需求。

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