按下 NavBar 时如何修复不移动内容 ReactJS？

Question

当我按 NavBar 拉伸时，内容会发生变化。

如何修复内容以使其始终位于我放置的位置？

这是未按下 NavBar 时的屏幕截图，一切正常：

这是按下导航栏并移动内容时的屏幕截图：

这是我在 React 上的代码：

    function Home() {
  return <div className="firstPageDiv">
    <div className="contentFirstPage">
      <h7>"Финиш Груп" ЕООД е специализирана в организирането и извършването на цялостни или частични ремонти на вашият Дом, Офис или Магазин.</h7>
    </div>
  </div>;
}

我的 css 来自这两个 div：

  .firstPageDiv{
  background-image: url("./Images/background.jpg");
  background-size: 100% 100%;
  height: 400px;
  }

.contentFirstPage{
  position: absolute;
  top: 80%;
  left: 25%;
  right: 25%;
  transform: translate(0, -50%);
  padding: 10px;
  background-size: 100% 100%;
  background: rgba(255,255,255,0.5);
  font-family: "Lucida Console", "Courier New", monospace;
  font-weight: bold;
  font-size: xx-small;
}

这是我的导航栏：

   function App() {
  return (
    <Router>
      <div className="App">

        <Navbar collapseOnSelect expand="md" bg="dark" variant="dark">
          <Navbar.Brand href="/">"ФИНИШ ГРУП" ЕООД</Navbar.Brand>
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="mr-auto">
            <Nav> 
                    <Link to={'/'} className="nav-link">НАЧАЛО</Link>
                    </Nav>
                    <Nav> 
                      <Link to={'/services'} className="nav-link">УСЛУГИ</Link>
                    </Nav>
                    <Nav> 
                      <Link to={'/gallery'} className="nav-link">ГАЛЕРИЯ</Link>
                    </Nav>
                    <Nav> 
                      <Link to={'/contacts'} className="nav-link">КОНТАКТИ</Link>
                    </Nav>
                    <Nav> 
                      <Link to={'/about'} className="nav-link">ЗА НАС</Link>
                    </Nav>
            </Nav>
          </Navbar.Collapse>
        </Navbar>

        <Switch>
              <Route exact path="/">
                <Home />
              </Route>
                <Route exact path="/services" component={Services}>
              <Services />
              </Route>
                <Route exact path="/gallery" component={Gallery}>
              <Gallery />
              </Route>
                <Route exact path="/contacts" component={Contacts}>
              <Contacts />
              </Route>
                <Route exact path="/about" component={About}>
              <About />
              </Route>
            </Switch>

        <header className="App-header">
        </header>
      </div>
    </Router>
  );
}

我需要修复什么才能使点击 NavBar 前后的内容保持在同一位置？

Answer 1

嗯，有一些错误：

function Home() {
  return (
  <div className="firstPageDiv">
    <div className="contentFirstPage">
      <h6>"Финиш Груп" ЕООД е специализирана в организирането и извършването на цялостни или частични ремонти на вашият Дом, Офис или Магазин.</h6>
    </div>
  </div>
);
}

html 中没有 h7 标签，我将 div 放在括号中。

也在css尝试..:[=12=]

.firstPageDiv{
  background-image: url("./Images/background.jpg");
  background-size: 100% 100%;
  height: 400px;

/*to position your content*/
  display: flex;
  justify-content: center;
  align-items: center;
}

.contentFirstPage{
  padding: 10px;
  background-size: 100% 100%;
  background: rgba(255,255,255,0.5);
  font-family: "Lucida Console", "Courier New", monospace;
  font-weight: bold;
  font-size: xx-small;
}

我想 flex 更适合定位，但让我知道结果。

按下 NavBar 时如何修复不移动内容 ReactJS？

How to fix when the NavBar is pressed not to move the content ReactJS?

javascript

css

navbar

reactjs