Кнопка выпадающего меню в nav увеличивает высоту навигационного элемента при нажатии кнопки выпадающего меню.Как решить? - PullRequest
Новая
       17

Кнопка выпадающего меню в nav увеличивает высоту навигационного элемента при нажатии кнопки выпадающего меню.Как решить?

0 голосов
/ 31 марта 2019

Я использую фреймворк Laravel и хочу использовать Bootstrap для создания выпадающего меню внутри панели навигации.Я бы хотел, чтобы раскрывающийся список не увеличивал высоту панели навигации при нажатии.

image: https://i.imgur.com/2tryjXl.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>

Я ожидаю, что панель навигации не будет расширяться из-за раскрывающегося в ней раскрывающегося списка.

1 Ответ

0 голосов
/ 31 марта 2019

Замените класс navbar-default на navbar-expand

Вы также можете добавить dropdown-menu-right после dropdown-menu, чтобы выровнять раскрывающийся список

...