如何在React Bootstrap中让Nav.Link组件宽度均等对齐？

我尝试让底部导航栏的Nav.Link组件实现宽度均等对齐，代码如下：

<Navbar bg="dark" variant="dark" fixed="bottom">
    <Nav className="me-auto">
        <Container>
            <Row>
                <Col>
                    <Nav.Link href="#search">🔍</Nav.Link>
                </Col>
                <Col>
                    <Nav.Link href="#start-a-thread">➕</Nav.Link>
                </Col>
            </Row>
        </Container>
    </Nav>
</Navbar>

但渲染后导航项靠左显示，效果如下：

我原本认为依据React Bootstrap的自动布局列特性，每个Col组件应该宽度均等，但实际并非如此。

环境信息：

• MacOS 13.0
• Node.js 18.11.0
• React 18.2.0
• React Bootstrap 2.5.0
• Google Chrome 107.0.5304.87

解决方案 #

问题出在布局元素的宽度约束和对齐设置上，调整后即可实现均等宽度对齐：

1. 移除Nav的me-auto类：该类会让Nav元素仅占据内容宽度并靠左，导致内部容器无法撑满Navbar。
2. 给嵌套的容器元素添加w-100类：让Nav、Container、Row都占满父级宽度，确保Col能在整个Navbar范围内分配空间。
3. 让Nav.Link撑满Col并居中内容：添加d-flex justify-content-center align-items-center h-100类，确保图标在Col内垂直水平居中，同时点击区域铺满Col。

调整后的代码：

<Navbar bg="dark" variant="dark" fixed="bottom">
    <Nav className="w-100">
        <Container className="w-100">
            <Row className="w-100">
                <Col className="p-0">
                    <Nav.Link href="#search" className="d-flex justify-content-center align-items-center h-100">🔍</Nav.Link>
                </Col>
                <Col className="p-0">
                    <Nav.Link href="#start-a-thread" className="d-flex justify-content-center align-items-center h-100">➕</Nav.Link>
                </Col>
            </Row>
        </Container>
    </Nav>
</Navbar>

补充说明 #

• w-100是Bootstrap内置的宽度100%工具类，确保布局元素撑满父容器。
• p-0移除Col的默认内边距，让导航项的点击区域更连贯。
• 弹性布局类让图标在导航项内居中，优化视觉体验。

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