Bootstrap导航栏文本对齐

Question

当我想添加导航栏文本时，它会推高文本以及导航栏项目。 如何使其与左侧的项目对齐？ 因为如果我删除了文本，一切似乎都很好，但是我想在那儿有文本。

        <ul class="navbar-nav ml-auto">
            {% if user.is_authenticated %}
                <li class="nav-item">
                    <p class="navbar-text">Välkommen {{ user.get_full_name }}</p>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'site:logout' %}"><i class="fa fa-power-off"></i> Logga ut </a>
                </li>
            {% else %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'site:login' %}"><i class="fa fa-sign-in"></i> Logga in </a>
                </li>
            {% endif %}
        </ul>

Answer 1

仅使用navbar-text上的li ...

<ul class="navbar-nav ml-auto">
    <li class="navbar-text">
        user.get_full_name
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{% url 'site:logout' %}"><i class="fa fa-power-off"></i> Logga ut </a>
    </li>
</ul>

https://www.codeply.com/go/rHJhDbPuOP

另一种选择是从<p>删除margin-bottom （ mb-0 ）...

<li class="nav-item">
    <p class="navbar-text mb-0">full_name</p>
</li>