如何将纯文本添加到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>