Выпадающий список Bootstrap в фиксированной панели навигации не реагирует на планшет

Извините, что беспокою вас, ребята, однако старые сообщения (например, Элемент выпадающего меню Bootstrap 4 на панели навигации не активен на мобильных устройствах) здесь мне не подходит. Данные подсказки в этом конкретном потоке уже реализованы в моем коде (см. ниже).

Я создал фиксированную панель навигации с выпадающими меню. В настольном браузере, а также в мобильных браузерах на телефонах Android все прекрасно, однако, когда дело доходит до планшета (тоже Android), гамбургер-меню разворачивается, но не открывает ни одно из этих выпадающих меню. Означает: я могу нажать на гамбургер-меню, оно открывается, но выпадающие меню остаются неактивными и не разворачиваются при нажатии.

Вы можете попытаться воспроизвести ошибку, уменьшив размер браузера, однако это не приведет к ее повторному появлению (поскольку на настольных и мобильных устройствах все в порядке). Дополнительно: когда я использую планшет горизонтально, точка останова не достигается для отображения гамбургер-меню. Затем, как ни странно, все в порядке, и я могу перемещаться по всем выпадающим меню. Я не знаю здесь и хотел бы показать вам соответствующий код.

        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                       <span class="sr-only">Toggle navigation</span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                    </button>

                <a class="navbar-brand" href="http://www.xxx.de">
                    <span class="brandicon icon-target"></span>
                    <span class="brandname">Brandname</span>
                </a>
            </div>

            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a class="dropdown-toggle nav-link" href="#" role="button" id="navbarDropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="btnicon icon-action-undo"></span>Früher<span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="link01.html">Antike</a></li>
                                <li><a href="link02.html">Mittelalter</a></li>
                            </ul>
                        </li>

                        <li class="dropdown">
                            <a class="dropdown-toggle nav-link" href="#" role="button" id="navbarDropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="btnicon icon-frame"></span>Heute<span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="otherlink1.html">Some name</a></li>
                                <li><a href="otherlink2.html">Rechtslage</a></li>
                            </ul>
                        </li>               

                        <li class="dropdown">
                            <a class="dropdown-toggle nav-link" href="#" role="button" id="navbarDropdown3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="btnicon icon-direction"></span>Another text<span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="linkage1.html">Header1</a></li>
                                <li><a href="linkage2.html">Header2</a></li>
                            </ul>
                        </li>                                       


            </div>
        </div>
    </nav>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

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


person djive    schedule 09.09.2018    source источник


Ответы (1)


Все хорошо - и извините за беспокойство. На самом деле я смог воспроизвести ошибку в своем настольном браузере, у меня был перепутан CSS. Была проблема с переполнением, которую я мог устранить, но изменив точку останова.

person djive    schedule 11.09.2018