Question

我读过其他文章并用谷歌搜索，我似乎无法使该下拉列表适用于bootstrap4。我正在使用Bootstrap 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

我可以通过对您的代码进行以下更改来获得下拉列表

 <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>

另外，请确保在加载Bootstrap.js之前先加载jquery-3.3.1.js

Answer 2

请在您的身体标签之前添加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>

Bootstrap4-不会显示下拉菜单

2 个答案: