reactjs - 在 React-Bootstrap 中划分的导航项目的对齐方式

问题描述

我使用NavBarreact-bootstrap实现了我的问题是导航项的对齐。在搜索了包括这个在内的类似问题后，我申请了回答它的解决方案。但是，我没有找到适合我的情况的正确答案。正如您在下图中看到的，我打算除 Title 外，其他项目需要使用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;

标签： reactjsreact-bootstrap

reactjs - 在 React-Bootstrap 中划分的导航项目的对齐方式

问题描述

解决方案

推荐阅读