React-Bootstrap 中的兩個導航欄行

Question

我試圖模仿這個導航欄：

在 React-Bootstrap 中，我正在考慮將兩個 Navbars 放在一起，為此我添加了這些文件：

主導航.tsx

import React from 'react';
import { Navbar, Container, Nav } from 'react-bootstrap';

export default function MainNav() {
  return (
    <Navbar expand="md" className="justify-content-center navbar-top" fixed="top">
      <Nav className="me-auto">
        <Navbar.Brand href="#home">Minimal Blog</Navbar.Brand>
      </Nav>
    </Navbar>
  )
}

導航欄.tsx：

import React from 'react';
import { Navbar, Container, Nav } from 'react-bootstrap';

export default function NavigationBar() {
  return (
    <Navbar expand="md" className="justify-content-center navbar-top" fixed="top">
        <Nav className="me-auto">
          <Nav.Link href="#home">Blog</Nav.Link>
          <Nav.Link href="#features">About</Nav.Link>
        </Nav>
    </Navbar>
  )
}

在 App.tsx 中，我只是添加了這些：

<MainNav />
<Navbar />

但似乎它們相互影響很大，我在這里創建了一個代碼沙箱： https://codesandbox.io/s/peaceful-sun-se4ni?file=/src/App.tsx用於復制，任何幫助/提示在使所需的 output 成為可能方面會有所幫助。

編輯 1：我添加了兩個導航欄，並利用了 z-index 屬性，但不知何故，我無法將內容對齊在一起。 這是沙盒鏈接： https://codesandbox.io/s/peaceful-sun-se4ni?file=/src/App.tsx

Answer 1

問題是這兩個導航欄都具有 position 的 CSS 屬性position: fixed; 因此它們相互交織以解決問題您可以通過為元素提供 class 來覆蓋 CSS 屬性，該元素將具有position:unset屬性

Answer 2

在 app.tsx 中，您正在導入 NavigationBar 但您正在編寫 您不需要兩個導航欄，您需要一個導航欄並將您在右側的元素對齊。

檢查這些例子https://getbootstrap.com/docs/4.0/components/navbar/#containers

我想你需要先生或類似的東西。

Answer 3

關於 EDIT 1，您有一個容器包裹在您的主導航周圍，而不是在第二個組件中。 這就是導致 alignment 問題的原因。