css - Bootstrap 4 下拉菜单在导航栏中打开并增加导航栏高度

Question

我正在开发一个 laravel 应用程序。我需要两个导航栏，在一号下方的二号，一个包含 Logo 和注销链接，另一个包含所有链接。

我已经实现了外观，但注销链接的下拉菜单在导航栏 One 中打开，导致每次切换下拉菜单时导航栏的高度都会增加。

图片-

这是我的代码-

<div id="header-main">
    <nav class="navbar navbar-light bg-light" id="header">
        <div class="container">
            <a class="navbar-brand" href="{{ url('/') }}">
                <img src="{{ asset('images/accounts.png') }}" height="50px">
            </a>
            @auth
            <div class="navbar-nav">
                <li class="nav-item dropdown">
                    <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                        {{ Auth::user()->name }} <span class="caret"></span>
                    </a>

                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">{{ __('Logout') }}</a>
                        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                @csrf
                        </form>
                    </div>
                </li>
            </div>
            @endauth
        </div>
    </nav>
</div>
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
    <div class="container">
        <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">
            <!-- Left Side Of Navbar -->
            <ul class="navbar-nav mr-auto">
                <!-- Authentication Links -->
                @guest
                    <li class="nav-item @if(Route::current()->getName() == 'login') active @endif">
                        <a class="nav-link" href="{{ route('login') }}"><i class="fas fa-sign-in-alt"></i> {{ __('Login') }}</a>
                    </li>
                    @if (Route::has('register'))
                        <li class="nav-item @if(Route::current()->getName() == 'register') active @endif">
                            <a class="nav-link" href="{{ route('register') }}"><i class="fas fa-user-plus"></i> {{ __('Register') }}</a>
                        </li>
                    @endif
                @else
                    <li class="nav-item @if(Route::current()->getName() == 'home') active @endif">
                        <a class="nav-link" href="{{ route('home') }}"><i class="fas fa-home"></i> {{ __('Home') }}</a>
                    </li>
                @endguest
            </ul>
        </div>
    </div>
</nav>

有人帮我。

Answer 1

在下拉菜单中使用position-absolute...

     <li class="nav-item dropdown">
             <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                     username<span class="caret"></span>
             </a>
             <div class="dropdown-menu position-absolute dropdown-menu-right" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="{{ route('logout') }}" >Logout</a>
                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> @csrf </form>
             </div>
      </li>

https://codeply.com/p/fHoKygnLv7