添加到主面板的宽度 div 导致页面宽度扩展到 Window

Question

我为 Reactbootstrap 下载了这个主题，并使其与 NextJS 一起使用。困扰我的问题是 Layout.js 中的 <div className="main-panel"> 稍微偏离了 window。就像垂直滚动条添加到水平边距一样。解决方案是用 div 覆盖滚动条吗？我只是想要 <div className="main-panel"> 适合 window 并且不需要水平滚动。我不知道如何解释，但我有一个例子可以给你看。 https://codesandbox.io/s/Whosebug-page-extends-off-window-d3gdc?file=/pages/index.js

这是 Layout.js 渲染：

return (
        <div className="wrapper">
            <Sidebar routes={routes} image={sidebarImage} background={sidebarBackground} />
            <div className="main-panel">
                <AdminNavbar />
                <div className="content">{props.children}</div>
                <AdminFooter />
                <div className="close-layer" onClick={() => document.documentElement.classList.toggle("nav-open")} />
            </div>
        </div>
    );

Answer 1

我发现问题是 <AdminFooter /> 的 CSS 宽度大于 <div className="main-panel"> 宽度。由于 main-panel 宽度设置为 100%，因此会导致页脚溢出。我的短期解决方案是删除一般的页脚。

<div className="wrapper">
  <Sidebar routes={routes} image={sidebarImage} background={sidebarBackground} />
  <div className="main-panel">
    <AdminNavbar />
    <div className="content">{props.children}</div>
    <div className="close-layer" onClick={()=> document.documentElement.classList.toggle("nav-open")} />
    </div>
  </div>

添加到主面板的宽度 div 导致页面宽度扩展到 Window

Width added to main-panel div Causing Pages Width to extend over the Window

html

css

reactjs

react-bootstrap

next.js