將自定義 css 添加到 React-Bootstrap 組件

Question

如何向 Nav 組件添加一些自定義 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>
);

Answer 1

您需要覆蓋 bootstrap 的默認 CSS，您可以使用瀏覽器的檢查器檢查類名並修改這些類，因為 react-bootstrap 無論如何都會編譯為 bootstrap

創建一個名為Navbar.css的 css 文件

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

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

將其導入到navbar.js組件中

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>
);