Html 下拉菜单错误地放置在导航栏bootstrap4中

作为一个新手，我在bootstrap 4的导航栏中有一个下拉列表。 这是我的密码：

<nav class="navbar navbar-toggleable-md fixed-top navbar-inverse bg-inverse " >
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#nav-items">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a href="#" class="navbar-brand">Flicker</a>
    <div class="collapse navbar-collapse" id="nav-items" >
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active" href="#">
                <a href="#" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Baidu</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link  disabled" href="#">Disbabled</a>
            </li>

            <li class="nav-item">
                <a href="#" class="dropdown-toggle nav-link"  data-toggle="dropdown">DropDown<span class="caret"></span></a>
                <ul class="dropdown-menu bg-inverse">
                    <li class="dropdown-item"><a href="#">Hello</a> </li>
                    <li class="dropdown-item"><a href="#">Yeah</a> </li>
                </ul>
            </li>
            <form class="form-inline ">
                <input class="form-control mr-sm-2" type="text" placeholder="Input">
                <button class="btn btn-outline-success">Submit</button>
            </form>
        </ul>
    </div>
</nav>

提交

结果是这样的：

---

下拉菜单放错地方了，怎么了？如何修复它？任何帮助都将不胜感激。

您需要将class下拉列表添加到您的导航项目中

<li class="nav-item dropdown">
    <a href="#" class="dropdown-toggle nav-link"  data-toggle="dropdown">DropDown<span class="caret"></span></a>
     <ul class="dropdown-menu bg-inverse">
          <li class="dropdown-item"><a href="#">Hello</a> </li>
          <li class="dropdown-item"><a href="#">Yeah</a> </li>
    </ul>
</li>

谢谢，你的建议节省了我很多时间。