Question

正如标题所述，我有一个带有两个图像的引导导航栏。一个是navbar品牌，另一个只是正常形象。我希望第二张图片在折叠菜单之外-很简单，我只是没有将它放在该div中。但是现在菜单出现时，它会在菜单之后被下推。这是一些照片。第一个电话代表第二个图像的位置（这是我希望其停留的位置），另一个代表它被向下推的位置。

我尝试将第二张图片移到导航栏折叠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 %}

那么，即使菜单折叠，如何使“徽标顶部” img与导航栏折叠按钮保持相同的水平？

Answer 1

像您一样，将第二个图像移动到navbar-collapse div之前，然后解决左侧菜单上的徽标，请添加TestEnv CSS样式和媒体断点以更改顺序。菜单折叠。

order: n

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

1 个答案: