如何移除Bootstrap 5导航栏中nav-items右侧的黑点？

你看到的黑点并非CSS样式或框架导致的列表标记，而是导航链接文本末尾手动添加的英文句号（.）。查看你的代码可以发现：

• <a class="nav-link active" aria-current="page" href="/">Home .</a>
• <a class="nav-link" href="/admin/">Admin Pages .</a>

只需删除这两个链接文本末尾的句号即可解决问题，修改后的代码片段如下：

<li class="nav-item fs-5">
    <a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item fs-5">
    <a class="nav-link" href="/admin/">Admin Pages</a>
</li>

另外补充一个结构优化建议：你导航栏右侧的通知下拉<li>直接放在了navbar-collapse容器中，未包裹在<ul class="navbar-nav">内，不符合HTML列表结构规范（虽不影响黑点问题，但可能引发布局异常）。建议将右侧的通知和用户下拉统一放到一个新的navbar-nav里，示例如下：

<ul class="navbar-nav ms-auto">
    <li class="nav-item dropdown notification-section">
        <a href="#" class="notification dropdown-toggle" id="navbarDropdown" role="button"
            data-bs-toggle="dropdown" aria-expanded="true">
            <span><i class='fa fa-bell'></i></span>
            <span class="badge" id="notification-badge">0</span>
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdown" id="notifications-dropdown"
            data-popper-placement="bottom-end">
            {% for i in notifications %}
            <li class="dropdown-item">{{i.message}}</li>
            <hr class="dropdown-divider">
            {% endfor %}
        </ul>
    </li>
    <li class="nav-item flex-shrink-0 dropdown" style="margin-right: 20px">
        <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle show" id="dropdownUser2"
            data-bs-toggle="dropdown" aria-expanded="true">
            <img src="{% static 'mike-oliver.jpg' %}" alt="MO" width="50" height="50"
                class="rounded-circle">
        </a>
        <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2"
            data-popper-placement="bottom-end">
            <li><a class="dropdown-item" href="#">New project...</a></li>
            <li><a class="dropdown-item" href="#">Settings</a></li>
            <li><a class="dropdown-item" href="#">Profile</a></li>
            <li>
                <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="#">Sign out</a></li>
        </ul>
    </li>
</ul>

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