Html 在引导导航栏中对齐元素

我有一个Bootstrap 4导航栏，在这里我无法对齐所有设备（或任何设备）上的中心元素。目前，导航栏左侧有一个图像，我目前正在使用填充来覆盖其余的图像，但这充其量只是一个丑陋的黑客行为

我认为需要做的是导航栏需要一直延伸到页面顶部，而不仅仅是图像。这样，我就可以使用类似于

text justify

类的东西将元素对齐到中心

调整这一点的最佳方式是什么

HTML：

<!--Site header-->
<header class="site-header" id="top-bar">
    <!-- Navbar-->
    <nav class="navbar navbar-expand-md navbar-dark fixed-top ml-auto">
        <div class="container col-md-12">

            <!-- Image on the left of the navbar -->
            <div class="navbar-nav mr-auto" style="padding: 0 100 0 20;">
                <a href="{% url 'landing' %}">
                    <img id="header-img" src="{% static '/bg/WEBSITE-LOGO.png' %}"/>
                </a>
            </div>
            <button aria-controls="navbarToggle"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                    class="navbar-toggler"
                    data-target="#navbarToggle"
                    data-toggle="collapse"
                    type="button">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- Links I want aligned to center of navbar -->
            <div class="collapse navbar-collapse" id="navbarToggle">
                <div class="navbar-nav m-auto">
                    <div class="header-icon-container d-xs-none">
                        <a class="nav-item nav-link d-xs-none" href="{% url 'overview' %}" id="overview">
                            <i class="fas fa-home fa-2x"></i>
                            <span>Home</span>
                        </a>
                    </div>
                    <div class="header-icon-container">
                        <a class="nav-item nav-link" href="#" id="drills">
                            <i class="fas fa-dumbbell fa-2x"></i>
                            <span>Drills</span>
                        </a>
                    </div>
                </div>

                <!-- Navbar Right Side - more links -->
                <div class="navbar-nav ml-auto">
                    {% if user.is_authenticated %}
                    <div class="btn-group text-right">
                        <button class="account-dropdown"
                                data-toggle="dropdown"
                                type="button">
                            <img class="account-header-img" src="{{ user.image.url }}">
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li>
                                <form action="{% url 'overview' %}"
                                      class="small-form"
                                      method="get">
                                    <input class="btn btn-link link-white"
                                           type="submit"
                                           value="Test stats">
                                </form>
                            </li>
                            <li>
                                <form action="{% url 'categories' %}"
                                      class="small-form"
                                      method="get">
                                    <input class="btn btn-link link-white"
                                           type="submit"
                                           value="Categories">
                                </form>
                            </li>
                            <li>
                                <form action="{% url 'profile' %}"
                                      class="small-form"
                                      method="get">
                                    <input class="btn btn-link link-white"
                                           type="submit"
                                           value="Update profile">
                                </form>
                            </li>
                            <li>
                                <form action="{% url 'logout' %}"
                                      class="small-form"
                                      method="get">
                                    <input class="btn btn-link link-white"
                                           type="submit"
                                           value="Logout">
                                </form>
                            </li>
                        </ul>
                    </div>
                    {% else %}
                    <a class="nav-item nav-link ml-auto" href="{% url 'login' %}">
                        <i class="fas fa-sign-in fa-2x"></i>
                        <span>Sign in</span>
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </nav>
</header>

{%if user.u经过身份验证%}










{%else%}
{%endif%}

选项1： 100%使用导航栏，创建手机和桌面cas（d-none d-md-block）删除切换div，您应该有3个div，其中包含导航内的内容。使其显示：flex和justify content:space around.=>左侧为1个分区（徽标），中间为2个分区（链接），右侧为3个分区（表格）

备选案文2： log+wrapper div将占用剩余空间+2个div，每个div占50%，并使它们文本对齐：居中，文本对齐：右（解决方案不佳）

选项3：导航栏100%，相对位置。Img位置：绝对位置；左：0

---

我选择解决方案1

请您解释清楚，您需要导航栏来填充整个视口行吗？我希望导航栏左侧的图像始终可见。导航栏中间和右侧的链接是可折叠的，我希望它们分别与导航栏的中心和右侧对齐。您可以看到，我已经向每个链接添加了类

mr auto

m-auto和

ml auto

，以将其推到上方，但我确信这不是正确的方法。