Question

我试图在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>

结果电子邮件地址显示为top-right，但我希望它显示为middle-right。

Answer 1

将类.nav-link添加到范围中，然后相应地设置其颜色，如下所示：

这是一个小提琴Fiddle Demo

.navbar-light .navbar-nav span.nav-link,
.navbar-light .navbar-nav span.nav-link:hover,
.navbar-light .navbar-nav span.nav-link:focus{
  color:rgba(0,0,0,0.8);
}

它应如下所示：

<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>

或者你可以随心所欲地保留你的标记和风格

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

Answer 2

您必须删除课程pull-xs-right，所以：

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

应该是：

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

或使用一个ul标记，如：

<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>
        <li class="nav-item">
            <span>email@example.com</span>
        </li>
    </ul>

</nav>

希望这有帮助。

Answer 3

尝试使用navbar-text来像这样

<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>

参见示例here

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

3 个答案: