Bootstrap4 - выпадающий не будет отображаться

Question

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

Это похоже на 5-е издание, поэтому оно может быть не совсем правильным для документации.

Я также тяну

<div class="container">
                        <nav class="navbar navbar-static-top">

                            <!-- /.navbar-collapse -->
                            <!-- Navbar Right Menu --
                            <div class="navbar-custom-menu"> -->
                              <ul class="navbar-nav mr-auto"><li class="nav-item dropdown user user-menu">
                      <a href="#" class="nav-link dropdown-toggle" id="loginDropdown" data-toggle="dropdown" aria-expanded="false">
                        <img src="https://panel.pewpewkittens.com/images/boocats/regular/pink.jpg" class="user-image" alt="User Image">
                        <span>Login</span>
                      </a>

                      <div class="dropdown-menu loggedout">
                        <form>

                        </form>
                      </div>
                  </li></ul>
                            <!-- -- </div-->
                            <!-- /.navbar-custom-menu -->

                        </nav>
                    </div>

Answer 1

пожалуйста, добавьте JS-файлы перед тегом тела

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

Answer 2

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

 <div class="container">
    <nav class="navbar navbar-static-top">

        <!-- /.navbar-collapse -->
        <!-- Navbar Right Menu --
                <div class="navbar-custom-menu"> -->
        <ul class="navbar-nav mr-auto">
            <li class="nav-item dropdown user user-menu">
                <a href="#" class="nav-link dropdown-toggle" id="loginDropdown" data-toggle="dropdown" role="button"
                    aria-haspopup="true" aria-expanded="false">
                    <img src="https://panel.pewpewkittens.com/images/boocats/regular/pink.jpg" class="user-image"
                        alt="User Image">
                    <span>Login</span>
                </a>

                <div class="dropdown-menu loggedout" aria-labelledby="loginDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
        <!-- -- </div-->
        <!-- /.navbar-custom-menu -->

    </nav>
</div>

Кроме того, убедитесь, что вы загружаете jquery-3.3.1.js перед загрузкой Bootstrap.js