如何在React Bootstrap的Header中将Nav.Link移动到右侧？

你当前的配置不生效，是因为Navbar.Collapse作为flex容器的子元素，默认宽度仅适配内部内容，你给内部的Nav设置justify-content-end也不会有右对齐效果。

方案1（推荐）：给Nav添加margin-left自动类 #

直接给Nav组件添加ms-auto工具类即可，这是Bootstrap flex布局下实现子元素右对齐的标准方案，代码修改点如下：

// 只需要修改Nav的className即可
<Nav className="ms-auto">
  {/* 原有Nav.Link内容保持不变 */}
</Nav>

如果你使用的是适配Bootstrap 4的旧版React Bootstrap，将ms-auto替换为ml-auto即可生效。

方案2：给Navbar.Collapse设置宽度 + 内容右对齐 #

如果要通过justify-content实现，可以给Navbar.Collapse添加w-100类让它占满剩余宽度，再给它加justify-content-end类：

<Navbar.Collapse id="basic-navbar-nav" className="w-100 justify-content-end">
  {/* 原有Nav内容保持不变 */}
</Navbar.Collapse>

修改后完整可运行代码参考：

import '../styles/Header.css'
import { Navbar, Nav } from "react-bootstrap"
import { Link } from 'react-router-dom'

// 注意React组件名需要大写开头，原小写header不符合规范，已修改
function Header() {
    return (
        <Navbar className="color-nav" variant="dark" expand="lg">
            <Navbar.Brand as={Link} to={"/"}>Logo will be Here</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="ms-auto">
                    <Nav.Link as={Link} to={"/facilities"}>Facilities</Nav.Link>
                    <Nav.Link as={Link} to={"/room"}>Room</Nav.Link>
                    <Nav.Link as={Link} to={"/contactus"}>Contact Us</Nav.Link>
                    <Nav.Link as={Link} to={"/bookingroom"}>Book now</Nav.Link>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    )
}

export default Header

内容的提问来源于stack exchange，提问作者Kim San