导航中的下拉按钮可在单击下拉按钮时展开导航的高度.如何解决

Question

我正在使用Laravel框架，并希望使用Bootstrap在导航栏中创建一个下拉列表。我希望下拉列表在单击时不要扩展导航栏的高度。

图片：https://i.stack.imgur.com/r9uhH.png

我已经看到了下拉菜单和导航栏 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类替换为navbar-expand

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