React Bootstrap中CSS自定义背景色和justify-content布局失效问题求助

导航链接无法右对齐的解决方法 #

justify-content-end 生效的前提是当前元素宽度撑满父容器，你给Nav加的类没有生效，是因为默认Nav组件的宽度仅适配内容，没有占满Navbar.Collapse的剩余宽度，只要给Nav添加w-100类让它撑满父级宽度即可：

<Nav className="w-100 justify-content-end">

自定义背景色不生效的解决方法 #

React Bootstrap 较新版本已经废弃了bsClass属性，给组件加自定义类直接用className即可，同时默认.navbar类的背景样式优先级高于你的单类选择器，提高自定义样式的优先级就能覆盖默认样式：

1. 先修改Navbar的属性，把bsClass换成className：

<Navbar className="custom-navbar" expand="lg">

2. 修改Header.css的选择器，提高优先级：

.navbar.custom-navbar {
    background-color: #10255A;
}

修改后的完整组件代码 #

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

function Header() {
    return (
        <div>
            <Navbar className="custom-navbar" expand="lg">
                <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="w-100 justify-content-end">
                        <Nav.Link href="#facilities">Facilities</Nav.Link>
                        <Nav.Link href="#room">Room</Nav.Link>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        </div>
    )
}

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