导航到不同路线时反应NavBar位置不一致

Question

免责声明 - 我是 CSS、React 和 JavaScript 的初学者。

为了学习 React，我正在开发一个小型的概念验证网站。我有一个底部对齐的导航栏，它有 4 个导航项目（帐户、奖励、卡片、关于）。无论您访问哪个链接，导航栏都旨在始终如一地显示。由于 react-router，两个链接目前有路由。帐户和关于。最初，Account 和 About 只是有一个占位符组件返回一些文本。这很好用。

自从开始为“帐户”页面制作基本的个人资料卡以来，我注意到导航栏在导航到“帐户”时不再位于相同的高度，而不是任何其他链接。我假设我的个人资料卡对它产生了影响，但因为我对 CSS/React 不是特别擅长，所以我不太清楚为什么/如何。

• 现场观察问题->https://develop.duezi49guns9m.amplifyapp.com/
• 具有完整代码的存储库（开发分支）-> https://github.com/kknd4eva/react-loyalty-app.git

Answer 1

这是因为 /customer 页面上的行类。您的装订线宽度推动元素比页面更宽，这也是您在底部获得水平滚动条的原因。

请记住，行必须进入容器而不是行内的容器。

在 /customer 中的“Row”类中，将 className 更改为此

<div className="row g-0">....

这会将装订线设置为 0，因为您没有容器。所以我也会在使用行的时候添加一个容器。

在我看来，你最好构建一个页面容器，这样每个页面都使用相同的类等。

PageContainer.js

export default function PageContainer(props) {
    return(
    <div className="container-fluid bg-light">
        <div className="row g-0">
            <div className="col">
                {props.children}
            </div>
            <div className="col">
                <Navigation />
            </div>
        </div
    </div
}

然后在你的 customer.js 中

...
return(
    <PageContainer>
         <ProfileCard loyalty_id={props.loyaltyid}/>
    </PageContainer>

编辑

抱歉完全忘了导航栏哈哈

现在也将导航栏移动到 PageContainer 内。

如果您需要更多帮助，请告诉我