Bootstrap下拉菜单在Navbar上拆分

Question

这是我的导航栏代码的全部内容：

<li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="login-form.php" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Accedi
              </a>
              <div class="dropdown-menu" id="loginForm" aria-labelledby="navbarDropdown">
                <form class="px-4 py-3" action="login.php" method="post">
                  <div class="form-group">
                    <label>Username:</label>
                    <input type="text" name="post_username" class="form-control" placeholder="Inserisci username" required>
                    <label class="mt-2">Password:</label>
                    <input type="password" name="post_password" class="form-control" placeholder="Password" required>
                  </div>
                  <button type="submit" class="btn btn-danger float-right">Accedi</button>
                </form>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="registration-form.php">Registrati</a>
            </li>

Noi，我有一个名为“ Accedi”的链接，在这里我想要链接到login-form.php页面的按钮，以及toogler thaat下拉菜单，用于在导航栏中登录。

我如何达到我的目标？