导航项的对齐方式分为 React-Bootstrap

Question

我使用 react-bootstrap 实现了 NavBar 我的问题是导航项的对齐。在搜索 including this one 后，我申请了回答它的解决方案。但是，我没有为我的案例找到合适的答案。正如您在下图中看到的那样，除了标题之外，我打算将其他项目使用 ml-auto 在右侧对齐，但它无法正常工作。你有办法解决这个问题吗？

import React from "react";
import { Nav, Navbar, NavDropdown } from "react-bootstrap";

const NavBarTest = () => {
  return (
    <>
      <Navbar collapseOnSelect expand="sm">
        <Navbar.Brand href="#">Title</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="ml-auto" light="true">
            <NavDropdown title="Content A" id="nav-dropdown1">
              <NavDropdown.Item href="#">content a</NavDropdown.Item>
            </NavDropdown>
            <NavDropdown title="  Content B" id="nav-dropdown2">
              <NavDropdown.Item href="#">content b-1</NavDropdown.Item>
              <NavDropdown.Item href="#">content b-2</NavDropdown.Item>
            </NavDropdown>
            <NavDropdown title=" Content C" id="nav-dropdown3">
              <NavDropdown.Item href="#">content c-1</NavDropdown.Item>
              <NavDropdown.Item href="#">content c-2</NavDropdown.Item>
            </NavDropdown>
            <NavDropdown title="Content D" id="nav-dropdown1"></NavDropdown>
            <NavDropdown title="Content E" id="nav-dropdown1">
              <NavDropdown.Item href="#">content e</NavDropdown.Item>
            </NavDropdown>
            <Nav.Item>
              <Nav.Link href="#">Content F</Nav.Link>
            </Nav.Item>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </>
  );
};

export default NavBarTest;

import "./App.css";
import React from "react";
import { Switch, BrowserRouter, Redirect, Route } from "react-router-dom";
import NavBarTest from "./layout/NavBarTest";

function App() {
  return (
    <div
      className="row ml-auto mr-auto"
      style={{
        width: "80%",
        alignItems: "center",
      }}
    >
      <BrowserRouter>
        <NavBarTest/>
       
        <Footer />
      </BrowserRouter>
    </div>
  );
}

export default App;

Answer 1

下面是导航栏右对齐的例子，希望对你有所帮助。 https://codesandbox.io/s/react-bootstrap-hamburger-menu-example-forked-t6xo5?file=/src/App.js

Answer 2

查代码发现App.jsx的样式影响了导航区的布局。把app.js的样式去掉'row'class后，看起来还不错

import "./App.css";
import React from "react";
import { Switch, BrowserRouter, Redirect, Route } from "react-router-dom";
import NavBarTest from "./layout/NavBarTest";

function App() {
  return (
    <div
      className="ml-auto mr-auto"
      style={{
        width: "80%",
        alignItems: "center",
      }}
    >
      <BrowserRouter>
        <NavBarTest/>
       
        <Footer />
      </BrowserRouter>
    </div>
  );
}

export default App;

导航项的对齐方式分为 React-Bootstrap

Alignment of Nav items divided in React-Bootstrap

reactjs

react-bootstrap