我如何将我的React组件放置在导航栏下方（以使导航栏不与之重叠）？

Question

bounty到期在6天内。这个问题的答案有资格获得+ 50声望赏金。Dave正在寻找来自信誉良好的来源的答案。

我正在尝试构建一个React 16.13.0应用程序，它以一种非常简单的方式进行布局-顶部的导航栏和下面的组件...

  return (<Router>
    <div className="App">
      <Flash />
      <nav className="navbar navbar-expand-lg navbar-light fixed-top">
        <div className="container">
          <Link className="navbar-brand" to={"/add"}>Chicommons</Link>
          <NavBar />
        </div>
      </nav>

      <div className="auth-wrapper">
        <div className="auth-inner">
          <Switch>
            <Route exact path='/' component={Add} />
            <Route path="/add" component={Add} />
            <Route path="/search" component={Search} />
          </Switch>
        </div>
      </div>
    </div>
    </Router>
  );

我为不同部分创建了以下样式...

.navbar-light {
  background-color: #ffffff;
  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
}

.auth-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: left;
}

.auth-inner {
  width: 450px;
  margin: auto;
  background: #ffffff;
  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
  padding: 40px 55px 45px 55px;
  border-radius: 15px;
  transition: all .3s;
}

但是，导航栏与组件重叠。可以在此处看到演示-http://prod.chicommons.coop或此屏幕截图

如何调整内容，使我的组件显示在导航栏下方并完全可见（如果需要滚动，就可以了？）>

我正在尝试构建一个React 16.13.0应用程序，该应用程序以一种非常简单的方式进行布局-顶部的导航栏和下面的组件... return（

...

>

Answer 1

您需要从文件scss / utilities / _position.scss

中更改position

Answer 2

事实上，导航栏上有position: fixed，auth-wrapper DOM元素从顶部开始

Answer 3

只需在您的App类中添加一些顶部填充。通过在此处添加它，将意味着将来的任何组件或布局都将与导航栏正确隔开。