Bootstrap的pull-right类失效：span元素仍保持左浮动

你遇到的问题是因为Bootstrap 4已经移除了pull-right类——这个类是Bootstrap 3里的写法，从Bootstrap 4开始官方就用新的类替代它了，所以你的pull-right自然不会生效。

另外，你用的navbar组件本质是一个flex容器，针对navbar内的元素，更推荐用flex布局相关的工具类来实现右对齐，这比浮动类更贴合组件的设计逻辑，响应式表现也更好。

两种可行的解决方法： #

方法1：使用flex工具类（推荐） #

在navbar的flex布局中，给需要右对齐的span添加ml-auto类（即margin-left: auto），它会自动被推到容器最右侧：

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <span class="text-light">AdminPanel</span>
  <span class="text-light ml-auto">[@role][@nickname]</span>
</nav>

方法2：使用浮动类 #

如果一定要用浮动方式，可以用Bootstrap 4提供的float-right类替代pull-right，这个写法在多数场景下也能生效：

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <span class="text-light">AdminPanel</span>
  <span class="text-light float-right">[@role][@nickname]</span>
</nav>

补充说明 #

为什么优先推荐ml-auto？因为navbar的flex布局会让内部元素默认沿主轴排列，ml-auto利用margin的自动计算逻辑把元素推到最右侧，这种方式比浮动更适配navbar的响应式特性，在移动端折叠导航时也能保持更合理的布局表现。

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