Question

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

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

我看过下拉列表和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类替换为navbar-expand

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

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

1 个答案: