下拉菜单在导航栏bootstrap4中放错了位置

Question

A newbie to bootstrap,I have a dropdown in a navbar in bootstrap 4. Here is my code:

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

It turns out like this:

The dropdown is misplaced.What's going wrong? And how to fix it? Any help will be appreciated.

Answer 1

you need to add the class dropdown to your nav-item div

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