如何将我的 React 组件放置在导航栏下方（这样导航栏不会与它重叠）？

Posted 2023-02-23

【中文标题】如何将我的 React 组件放置在导航栏下方（这样导航栏不会与它重叠）？

【英文标题】：How do I position my React component beneath the navbar (so that the navbar doesn't overlap it)?

【发布时间】：2020-08-20 10:22:42

【问题描述】：

我正在尝试构建一个 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;

但是，导航栏与组件重叠。 Demo可以看这里——http://prod.chicommons.coop，或者这个截图

我该如何调整，使我的组件出现在导航栏下方并且完全可见（如果必须滚动也可以）？

【问题讨论】：

根据我自己的经验，您应该避免使用粘性固定顶部...改用 css 网格，您将永远不会有重叠

【参考方案1】：

您需要更改文件 scss/utilities/_position.scss 中的 position 属性。它可以是 position:sticky 或 position:initial 或除绝对或相对之外的任何内容。

例如：-

.fixed-bottom, .fixed-top 
position: initial;
right: 0;
left: 0;
z-index: 1030;

【讨论】：

你说的是引导程序安装的默认文件，即 ./node_modules/bootstrap/scss/utilities/_position.scss 吗？有没有办法在不更改我没有编写的已安装模块的情况下进行您建议的编辑？

是的，你可以在不编辑引导程序的情况下做到这一点。将这些中的任何一个添加到您的 css 文件中。 nav.navbar position: static; 或 nav.navbar position: inherit; 或 nav.navbar position: initial;

【参考方案2】：

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

现在有多种解决方案，具体取决于您希望导航栏的行为方式

由于您希望导航栏贴在顶部并且不与 DOM 的其余部分一起滚动，您可以将其设为 position: sticky 而不是 position: fixed 并在您的 authWrapper 中添加一个小填充以提供足够的空间顶

由于您现在使用bootstrap 类fixed-top。我建议你用你自己的自定义类替换它

 <nav className="navbar navbar-expand-lg navbar-light navbar-fixed-top">
    <div className="container">
      <Link className="navbar-brand" to="/add">Chicommons</Link>
      <NavBar />
    </div>
  </nav>


.navbar.navbar-fixed-top 
  position: sticky;
  top: 0;
  right: 0;
  left: 0;


.auth-wrapper 
  padding-top: 2rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: left;

但是，当您滚动到页面末尾时，上述解决方案会导致您的导航栏看起来不合适

这里更好的解决方案是使用 position: fixed 而不是 position: sticky 并将 padding-top 或 top css 添加到 auth-wrapper

.navbar.navbar-fixed-top 
  position: fixed;
  top: 0;
  right: 0;
  left: 0;


.auth-wrapper 
  padding-top: 6rem; // enough space towards the top to be not overlapped by navbar
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: left;

【讨论】：

我注意到您正在硬编码“6rem”。是否有某种方法可以指示样式始终将内容定位在导航组件下方，而不必知道导航的确切大小？如果 CSS 有这种能力，那我就想走。

@Dave 这就是第一个解决方案所提供的。它有一个小缺点。

【参考方案3】：

你已经为你的导航提供了固定的***课程。它会导致它重叠所有东西（就像它没有其他元素的高度一样）。删除固定顶部类，然后如果需要，在滚动后将其添加到导航栏，以便在用户向下滚动时它会粘在顶部。 （你也可以给你的表单留一点margin-top，这样它就不会粘在你的导航上，变得更漂亮。）

【参考方案4】：

在此类 .fixed-bottom, .fixed-top 上使用 position: sticky; 而不是 position: fixed;