如何仅在Bootstrap导航栏右侧显示单个文本？

针对你遇到的情况，有几种基于Bootstrap原生特性的方案，可以实现单个文本在导航栏右侧显示，无需依赖额外的占位文本：

方案1：用Flex布局类强制右对齐 #

给包含文本的容器添加d-flex和justify-content-end类，通过Bootstrap的flex布局能力直接让子元素靠右：

<nav class="admin-nav navbar navbar-expand navbar-light">
    <div class="container d-flex justify-content-end">
        <p>Some text</p>
    </div>
</nav>

d-flex将容器转为flex布局容器，justify-content-end会把容器内所有子元素对齐到右侧，无论容器内内容多少都能稳定生效。

方案2：利用自动margin推至右侧 #

给文本元素添加ml-auto类，在flex布局中这个类会自动填充左侧剩余空间，从而把元素挤到右侧：

<nav class="admin-nav navbar navbar-expand navbar-light">
    <div class="container">
        <p class="ml-auto">Some text</p>
    </div>
</nav>

这是Bootstrap导航栏中常用的元素靠右技巧，无需修改容器布局属性，仅给目标元素加类即可实现需求。

原代码异常原因说明 #

你原代码中只有添加"Test"文本时Some text才靠右，是因为当容器内只有<p>元素时，text-right类虽会让<p>内部文本右对齐，但<p>作为块级元素默认占满容器宽度，而Bootstrap的navbar-expand导航栏默认是flex布局，容器未被正确拉伸，导致视觉上文本靠左；添加"Test"后，容器内出现inline内容，触发了text-right的正确对齐效果。

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