ReactJS Bootstrap 5.2：如何让底部导航栏列元素均匀分布？

你当前的底部导航元素过于紧凑且聚集在中心，核心问题是布局结构没有充分利用Bootstrap的flex布局能力，同时存在类名拼写错误。以下是最佳实现方式：

关键修改点 #

• 修正类名错误：React组件中需使用className而非classname，原代码里的<div classname="row">是无效的，改为<div className="row">。
• 利用Bootstrap Flex布局：让导航列表占满整个宽度并均匀分布子元素，给navbar-nav添加d-flex、w-100、justify-content-around类（justify-content-between也可，根据需求选择间距）。
• 移除冗余间距：删除li元素上的me-2，避免额外margin干扰均匀分布。
• 取消强制居中：移除外层container-fluid的justify-content: center样式，让容器自然占满页脚宽度。

修改后的完整代码 #

import React from "react";
import {Link} from "react-router-dom";

export const NavBarBrandBottom = () => {
    return (
        <div className="container-fluid">
            <div className="row">
                <ul className="navbar-nav mb-lg-0 d-flex w-100 justify-content-around" style={{
                    "font-size": '12px'
                }}>
                    <li className="nav-item text-center">
                        <Link to="/add" className="nav-link">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white"
                                className="bi bi-plus-square-fill ms-1" viewBox="0 0 16 16">
                                <path
                                    d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z"/>
                            </svg>
                            <br/>
                            <span>Add</span>
                        </Link>
                    </li>
                    <li className="nav-item text-center">
                        <Link to="/tasks" className="nav-link">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white"
                                className="bi bi-card-list ms-1" viewBox="0 0 16 16">
                                <path
                                    d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
                                <path
                                    d="M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-1-5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zM4 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
                            </svg>
                            <br/>
                            <span>Items</span>
                        </Link>
                    </li>
                    <li className="nav-item text-center">
                        <Link to="/family" className="nav-link">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white"
                                className="bi bi-people-fill ms-1" viewBox="0 0 16 16">
                                <path
                                    d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7Zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-5.784 6A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216ZM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"/>
                            </svg>
                            <br/>
                            <span>Groups</span>
                        </Link>
                    </li>
                </ul>
            </div>      
        </div>
    );
};

补充说明 #

• justify-content-around会让每个li元素左右间距相等，完全均匀分布在容器内；如果需要元素贴紧左右边缘，中间间距均匀，可替换为justify-content-between。
• 给所有li添加text-center确保图标和文字居中显示，提升视觉一致性。

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