Question

我有一个Bootstrap 4导航栏，无法在其中对齐所有设备（或与此相关的任何设备）上的中心元素。当前，导航栏的左侧有一个图像，我目前正在使用填充将其余部分推到上方，但这充其量是一个丑陋的hack。

我认为需要做的是，导航栏需要一直延伸到页面顶部，而不仅仅是图像。这样，我可以使用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>

Answer 1

选项1：将您的导航栏设置为100％，创建移动设备和台式机CAS（D-无D-md-block）删除切换div，您的导航栏中应有3 div的内容。使其显示：flex带有justify-content：空格。 =>左侧1格（徽标），中心2格（链接），右侧3格（表格）

选项2： log + wrapper div wich占用了其余的空间+ 2个div，每个div占50％，并将它们设为text-align：center，text-align：right（较差的解决方案）

选项3：导航栏100％，相对位置。图位置：绝对；左：0;，...

我要寻求第一个解决方案

在Bootstrap导航栏中对齐元素

1 个答案: