单击下拉按钮时，导航中的下拉按钮会扩展导航的高度。怎么解决？

Question

我正在使用 Laravel 框架并希望使用 Bootstrap 在导航栏内创建下拉菜单。我希望下拉菜单在单击时不会扩展导航栏的高度。

图片：https://i.imgur.com/2tryjXl.png

我看过dropdown和navbar Bootstrap4的文档，也找了很多帖子还是无法解决这个问题

<div id="app">
    <nav class="navbar navbar-default navbar-dark bg-dark">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
            </div>
            <div>
                <ul class="nav navbar-nav justify-content-end">
                    @if (Auth::guest())
                        <li class="nav-item"><a href="{{ route('login') }}" class="nav-link">Login</a></li>
                    @else
                        <li>
                            <div class="dropdown show">
                                <a href="#" class="btn btn-secondary dropdown-toggle" role="button"
                                   id="dropdownMenuLink" data-toggle="dropdown"
                                   aria-haspopup="true" aria-expanded="false">
                                    {{ Auth::user()->name }}
                                </a>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                                    <a href="{{ route('logout') }}" class="dropdown-item"
                                       onclick="event.preventDefault();document.getElementById('logout-form').submit();">
                                        Logout
                                    </a>
                                    <form id="logout-form" action="{{ route('logout') }}" method="POST"
                                          style="display: none;">
                                        {{ csrf_field() }}
                                    </form>
                                </div>
                            </div>
                        </li>
                    @endif
                </ul>
            </div>
        </div>
    </nav>
    @yield('content')
</div>

我希望导航栏不会因为下拉菜单的打开而展开。

Answer 1

将 navbar-default class 替换为 navbar-expand

您可能还想在 dropdown-menu 之后添加 dropdown-menu-right 以对齐下拉列表

单击下拉按钮时，导航中的下拉按钮会扩展导航的高度。怎么解决？

Dropdown button in nav expand the height of the nav when dropdown button clicked. How to solve?

nav

laravel

dropdown

bootstrap-4