使用Django+Bootstrap导航栏链接末尾出现异常字符的排查求助

你看到的导航链接右侧黑框，是Bootstrap默认给可聚焦元素（如<a>标签）添加的焦点轮廓样式，这会导致视觉上出现类似异常字符的错觉，以下是彻底解决方法：

方法一：直接移除焦点轮廓（快速解决） #

在你的base.html的<head>标签内，Bootstrap CSS引入之后，添加自定义CSS覆盖默认样式：

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- 自定义CSS移除黑框 -->
<style>
.navbar-nav .nav-link:focus {
    outline: none;
    box-shadow: none; /* 同时移除可能存在的焦点阴影 */
}
</style>

方法二：保留可访问性的替代方案 #

如果需要兼顾键盘导航的可访问性（不建议完全移除轮廓），可以替换为更柔和的样式：

.navbar-nav .nav-link:focus {
    outline: 2px solid rgba(0, 0, 0, 0.2);
    outline-offset: 2px;
}

补充说明 #

你之前通过在链接文本后添加.的方式只是视觉掩盖，并未解决根本问题。通过自定义CSS覆盖Bootstrap的默认焦点样式，才能彻底消除黑框带来的异常字符视觉问题。

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