html - Bootstrap 导航栏下拉列表中的注销表单

Question

我有一个带有下拉菜单的 Bootstrap3 导航栏。

我希望我的“注销”表单位于该下拉列表中。它不是一个可见的表单，只是表单中的一个注销按钮。

我试过这个:

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown<span class="caret"></span></a>
      <ul class="dropdown-menu">

        <!-- this dropdown menu item looks right -->
        <li><a href="#">Foo</a></li>

        <!-- this dropdown menu item (a logout form) does not -->
        <li><form action="/logout" method="post"><button type="submit" class="btn btn-link navbar-btn navbar-link">Log off</button></form></li>

      </ul>
    </li>
  </ul>
</div>

但它的样式不正确。

如何让它匹配正常的下 zipper 接？我希望我不需要手动调整 css，并且有一种内置的方法可以做到这一点？

Answer 1

这不会真正起作用，但您可以在其他地方创建注销表单:

<form id="logout-form" style="display:none" action="/logout" method="POST"></form>

当用户点击注销时，你只需调用

document.getElementById("logout-form").submit();

在 Javascript 中或者你设置

onclick="document.getElementById('logout-form').submit();"