Html 如何在引导4中向导航栏添加文本？

我试图在Bootstrap 4导航栏中显示我的应用程序中登录用户的用户名。但是，它的显示与其他元素不垂直对齐

下面是一个例子：

<nav class="navbar navbar-light bg-faded">

    <a class="navbar-brand" href="#">Brand Name</a>

    <ul class="nav navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Foo</a>
        </li>
    </ul>

    <ul class="nav navbar-nav pull-xs-right">
        <li class="nav-item">
            <span>email@example.com</span>
        </li>
    </ul>

</nav>

email@example.com

---

生成的电子邮件地址显示在右上角，但我希望它显示在右中角，因此：

<ul class="nav navbar-nav pull-xs-right">
    <li class="nav-item">
        <span>email@example.com</span>
    </li>
</ul>

---

希望这有帮助。

您必须删除类

向右拉X

，以便：

<ul class="nav navbar-nav pull-xs-right">
    <li class="nav-item">
        <span>email@example.com</span>
    </li>
</ul>

---

希望这能有所帮助。

尝试使用导航栏文本发送给li

<nav class="navbar navbar-light bg-faded">

    <a class="navbar-brand" href="#">Brand Name</a>

    <ul class="nav navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Foo</a>
        </li>
    </ul>

    <ul class="nav navbar-nav pull-xs-right">
        <li class=" nav-item navbar-text">
            <span>email@example.com</span>
        </li>
    </ul>

</nav>

email@example.com

---

请参见示例

尝试使用导航栏文本，如下所示

<nav class="navbar navbar-light bg-faded">

    <a class="navbar-brand" href="#">Brand Name</a>

    <ul class="nav navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Foo</a>
        </li>
    </ul>

    <ul class="nav navbar-nav pull-xs-right">
        <li class=" nav-item navbar-text">
            <span>email@example.com</span>
        </li>
    </ul>

</nav>

email@example.com

---

参见示例

将class

.nav链接

添加到span，然后相应地设置其颜色样式，如下所示：

这是一把小提琴

它应该如下所示：

<nav class="navbar navbar-light bg-faded">

    <a class="navbar-brand" href="#">Brand Name</a>

    <ul class="nav navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Foo</a>
        </li>
    </ul>

    <ul class="nav navbar-nav pull-xs-right">
        <li class="nav-item">
            <span class="nav-link">email@example.com</span>
        </li>
    </ul>

</nav>

---

将class

.nav link

添加到span，然后相应地设置其颜色样式，如下所示：

这是一把小提琴

它应该如下所示：

<nav class="navbar navbar-light bg-faded">

    <a class="navbar-brand" href="#">Brand Name</a>

    <ul class="nav navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Foo</a>
        </li>
    </ul>

    <ul class="nav navbar-nav pull-xs-right">
        <li class="nav-item">
            <span class="nav-link">email@example.com</span>
        </li>
    </ul>

</nav>

---

remove

pull xs right

remove

pull xs right

感谢您的建议，但这无助于解决垂直对齐问题，它会使文本显示在左侧，我希望文本向右浮动。对不起，我的描述不正确。文本应该位于导航栏的垂直中间，现在它与上边框垂直对齐。感谢您的建议，但这无助于解决垂直对齐问题，它使文本显示在左侧，我希望它向右浮动。对不起，我的错误描述。文本应该位于导航栏的垂直中间，现在它与上边框垂直对齐。遗憾的是，在Bootstrap 4中没有

.navbar text

类。遗憾的是，在Bootstrap 4中没有

.navbar text

类。这对我来说有点不对劲，不过还是要谢谢你。看起来Bootstrap 4还没有完成，现在将不得不恢复到版本3。编辑我的答案以在底部包含一个不太老练的方式-引导4应该有一个小脚印的愿望，所以我怀疑他们现在会改变很多。alpha更只是为了找到bug，但是如果需要，你可以直接设置跨度样式，而不是覆盖样式这似乎没那么刻薄了，这符合我的口味，不过还是要谢谢你。看起来Bootstrap 4还没有完成，现在将不得不恢复到版本3。编辑我的答案以在底部包含一个不太老练的方式-引导4应该有一个小脚印的愿望，所以我怀疑他们现在会改变很多。alpha更只是为了找到bug，但是如果需要，你可以直接设置跨度样式，而不是覆盖样式这似乎没那么刻薄

.navbar-nav span {
    display: block;
    padding-top: .425rem;
    padding-bottom: .425rem;
}