将自定义 css 添加到 React-Bootstrap 组件

Question

How to add some custom CSS styles to the Nav component to manage the padding between the nav items and make it float right of the page?

const navbar = props => (
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
    <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
    <Navbar.Toggle aria-controls="responsive-navbar-nav" />
    <Navbar.Collapse id="responsive-navbar-nav">
      <Nav className="mr-auto">
        <Nav.Link href="#features">Home</Nav.Link>
        <Nav.Link href="#pricing">About Us</Nav.Link>
        <NavDropdown title="Facilities" id="collasible-nav-dropdown">
          <NavDropdown.Item href="#action/3.1">Library</NavDropdown.Item>
          <NavDropdown.Divider />
          <NavDropdown.Item href="#action/3.2">Laboratories</NavDropdown.Item>
          <NavDropdown.Divider />
          <NavDropdown.Item href="#action/3.3">Transportation</NavDropdown.Item>
          <NavDropdown.Divider />
          <NavDropdown.Item href="#action/3.3">Hostel</NavDropdown.Item>
        </NavDropdown>
        <Nav.Link href="#pricing">Gallery</Nav.Link>
        <Nav.Link href="#pricing">Event</Nav.Link>
        <Nav.Link href="#pricing">Contact Us</Nav.Link>
      </Nav>
    </Navbar.Collapse>
  </Navbar>
);

Answer 1

you would need to override the default CSS of bootstrap, you could check the class names using the inspector of your browser and modify those classes since the react-bootstrap compiles to bootstrap anyways

create a css file called Navbar.css

 .navbar-nav {
  float: right !important;
}

.navbar-expand-lg .navbar-collapse {
  display: inline !important;
}

import it into navbar.js component

import "./Navbar.css";
    const navbar = props => (
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
    <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
    <Navbar.Toggle aria-controls="responsive-navbar-nav" />
    <Navbar.Collapse id="responsive-navbar-nav">
      <Nav className="mr-auto">
        <Nav.Link href="#features">Home</Nav.Link>
        <Nav.Link href="#pricing">About Us</Nav.Link>
        <NavDropdown title="Facilities" id="collasible-nav-dropdown">
          <NavDropdown.Item href="#action/3.1">Library</NavDropdown.Item>
          <NavDropdown.Divider />
          <NavDropdown.Item href="#action/3.2">Laboratories</NavDropdown.Item>
          <NavDropdown.Divider />
          <NavDropdown.Item href="#action/3.3">Transportation</NavDropdown.Item>
          <NavDropdown.Divider />
          <NavDropdown.Item href="#action/3.3">Hostel</NavDropdown.Item>
        </NavDropdown>
        <Nav.Link href="#pricing">Gallery</Nav.Link>
        <Nav.Link href="#pricing">Event</Nav.Link>
        <Nav.Link href="#pricing">Contact Us</Nav.Link>
      </Nav>
    </Navbar.Collapse>
  </Navbar>
);