Bootstrap 4: украсить панель навигации на мобильном

Question

Проблема

В настоящее время раскрывающийся список навигации на моем мобильном телефоне не выглядит "современным". Однако, когда я использую chrome, чтобы войти в режим разработчика (f12) и перейти в режим просмотра с мобильных устройств, в нем отображается выпадающий список, выглядящий современно.

Код

Я использую Bootstrap 4.3.1

<?php if (isset($admin) && $admin) { ?>
                    <!-- Dropdown -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Admin
                        </a>

                        <div class="dropdown-menu" style="background-color:#da3744" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="./Administrator/userManagement.php">User Management</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>

                    </li>

                <?php } ?>

Вопрос

Есть есть исправление, при котором выпадающий список на моем мобильном телефоне выглядит так же, как chrome?

Работает на chrome

Работает на iPhone XS Max ios 13,3 сафари

Answer 1

Попробуйте удалить type="button"

 <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Admin
      </a>
      <div class="dropdown-menu" style="background-color:#da3744" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="./Administrator/userManagement.php">
          User Management
        </a>
        <a class="dropdown-item" href="#">
          Another action
        </a>
        <div class="dropdown-divider">
        </div>
        <a class="dropdown-item" href="#">
          Something else here
        </a>
      </div>
    </li>