вам нужно переопределить значение по умолчанию CSS из bootstrap, вы можете проверить имена классов с помощью инспектора вашего браузера и изменить эти классы, так как response- bootstrap компилируется в bootstrap в любом случае
создайте css файл с именем Navbar. 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>
);