Laravel项目中Bootstrap4导航栏下拉菜单导致高度异常问题求助

你遇到的这个问题是因为Bootstrap默认的下拉菜单是在父元素的文档流内部展开的，所以每次切换下拉菜单时，第一个导航栏的高度会被下拉菜单的内容撑开。要修复这个问题，我们只需要让下拉菜单脱离当前导航栏的文档流，同时保持正确的定位关系即可。

具体解决方案步骤： #

• 给第一个导航栏添加position-relative类，确保下拉菜单可以相对于它进行定位
• 给注销按钮的下拉菜单添加position-absolute和mt-2类，让它脱离文档流，同时调整顶部间距避免和导航栏重叠

修改后的完整第一个导航栏代码： #

<div id="header-main">
    <nav class="navbar navbar-light bg-light position-relative" 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 position-absolute mt-2" 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>

原理说明： #

• position-relative给第一个导航栏设置了定位上下文，这样它内部的绝对定位元素会以它为基准定位
• position-absolute让下拉菜单脱离文档流，不再占用父元素的空间，自然就不会撑高导航栏
• mt-2是Bootstrap的间距类，用来给下拉菜单添加一点顶部外边距，避免和导航栏的底部紧贴在一起，提升视觉体验

这样修改后，你点击用户名称展开注销下拉菜单时，第一个导航栏的高度就不会再变化了，下拉菜单会悬浮在导航栏下方，完全符合你的预期布局。

内容的提问来源于stack exchange，提问作者Piyush