如何将纯文本添加到Bootstrap 4导航栏？

Question

这可能很简单，但答案似乎是在逃避我。我已经使用navbar-text尝试了几种组合，但大多数组合最终将文本放在另一个导航栏项的上方或下方。我希望文本位于“登录”链接的左侧。

以下是我现在所拥有的：

<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
    <a class="navbar-brand" href="#">Sample App</a>
    <ul class="nav navbar-nav">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
    <div class="nav navbar-nav pull-md-right">
        <div class="nav nav-item">
            <p class="navbar-text">Signed in as User#1234</p>
        </div>
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Sign In</a>
            </li>
        </ul>
    </div>
</nav>

最终看起来像这样：

非常感谢提前。

Answer 1

我认为这是因为div块：

<div class="nav nav-item">
    <p class="navbar-text">Signed in as User#1234</p>
</div>

div总是显示为块元素，这就是为什么它会在div块下面开始一个新行的原因。如果您将项目作为列表标记的一部分，那么它应该工作。例如：

<div class="nav navbar-nav pull-md-right">
    <ul class="nav navbar-nav">
        <li class="nav-item">
            <p class="navbar-text">Signed in as User#1234</p>
        </li>   
        <li class="nav-item">
            <a class="nav-link" href="#">Sign In</a>
        </li>
    </ul>
</div>