我有一个带有两个徽标的导航栏 - 不是导航栏品牌的导航栏应该与菜单折叠时的折叠按钮保持一致答案

【问题标题】：I have a navbar with two logos - the one which is not the navbar-brand should stay in-line with the button for collapsing while the menu collapses我有一个带有两个徽标的导航栏 - 不是导航栏品牌的导航栏应该与菜单折叠时的折叠按钮保持一致
【发布时间】：2023-03-07 01:54:01
【问题描述】：

正如标题所说，我有一个带有两个图像的引导导航栏。一个是导航栏品牌，另一个只是普通图像。我希望第二张图片位于折叠菜单之外——这很简单，我只是没有把它放在那个 div 中。但是现在当菜单出现时，它在菜单之后被推下。这里有一些照片。第一个电话代表第二个图像的位置（这就是我希望它停留的位置），另一个是它被推下的位置。

我尝试将第二张图片移到 navbar-collapse div 之前。它可以工作，但在默认状态下（没有折叠按钮）我的徽标停留在菜单的左侧。（这不是我想要的）。我尝试了一些右拉、左拉、浮动定位等组合，但没有任何效果。

我能想到并且可能工作的唯一方法是相对定位中的绝对定位，但我认为这不是最好的解决方案。

这是我的代码的外观（django 模板，使用引导程序）：

{% load static %}
{% block content %}
<header>
    <div class="container-fluid border">
        <div class="row bg-orange">
            <div class="container-fluid">
                    <div class="ml-1 margin-top-bot float-left">
                        <div class="phone">
                            <i class="fas fa-phone ml-5"></i>
                            <span class="ml-1 bara-mica-text">074 444 4444</span>
                        </div>
                        <div class="email">
                            <i class="fas fa-envelope ml-5"></i>
                            <span class="ml-1 bara-mica-text">bestdavnic73@gmail.com</span>
                        </div>
                    </div>
                    <div class="mr-2 margin-top-bot float-right">
                      <span class="mr-5"><a href="#" class="mr-5">Login</a></span>
                      <span class="mr-5"><a href="#" class="mr-5">Register</a></span>
                    </div>
            </div>
        </div>
        <nav class="navbar navbar-expand-custom navbar-light navbar-custom">     
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <a class="navbar-brand" href="/"><img src="{% static 'img/logo.jpg' %}" class="logo"></a>
                  <ul class="navbar-nav mx-auto">
                    <li class="nav-item mr-2 active">
                      <a class="nav-link buton-top-home" href="/">Acasa <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item mr-2">
                      <a class="nav-link buton-top-home" href="#">Cine suntem?</a>
                    </li>
                    <li class="nav-item mr-2">
                        <a class="nav-link buton-top-home" href="#">Cum te sustinem?</a>
                    </li>
                    <li class="nav-item mr-2">
                      <a class="nav-link buton-top-home" href="#">Proiect 1</a>
                    </li>
                    <li class="nav-item mr-2">
                        <a class="nav-link buton-top-home" href="#">Proiect 2</a>
                      </li>
                      <li class="nav-item mr-2">
                          <a class="nav-link buton-top-home" href="#">Consultanta</a>
                      </li>
                      <li class="nav-item mr-2">
                        <a class="nav-link buton-top-home" href="#">Mediere</a>
                      </li>
                      <li class="nav-item mr-2">
                        <a class="nav-link buton-top-home" href="#">Portofoliu</a>
                      </li>
                      <li class="nav-item mr-2">
                          <a class="nav-link buton-top-home" href="#">FAQ</a>
                        </li>
                      <li class="nav-item mr-2">
                          <a class="nav-link buton-top-home" href="#">Contact</a>
                      </li>
                  </ul>
                </div>
                <div class="logos-top-wrapper">
                  <img src="{% static 'img/logos.jpg' %}" class="logos-top">
                </div>
              </nav> 
        </div>
    </header>
{% endblock %}

那么，即使菜单折叠，如何让“logos-top”img 与 navbar-collapse 按钮保持同一级别？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

将第二张图片移到 navbar-collapse div 之前，就像您第一次一样，然后解决左侧菜单上的徽标，添加 order: n CSS 样式和媒体断点以更改菜单折叠时的顺序.

.order-logos {
        order: 1;
}

@media (max-width: 992px) {
        .order-logos {
                order: 0;
        }
}

【讨论】：