如何修改Bootstrap下拉列表？请求修复失效的Log out链接

嘿，我来帮你搞定这个下拉菜单里的Log out链接失效的问题！

问题根源 #

你碰到的核心问题是：<a>标签本身不支持method="POST"属性，而且th:action是Thymeleaf专门给表单元素设计的属性，放在<a>标签上完全不会生效。Spring Security的默认退出登录端点通常要求用POST请求触发，所以你点击那个链接时，只会跳到页面顶部的#锚点，根本没发送正确的请求到/logout接口。

修复方案（两种可选） #

方案1：用表单+按钮模拟链接样式（无JS，推荐）

把原来的<a>标签换成一个表单包裹的按钮，给按钮加上Bootstrap的dropdown-item样式，让它看起来和普通链接一模一样，同时能发送POST请求：

<div class="logout-dropdown-list float-right">
  <button class="btn btn-secondary btn-md dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
  <div class="dropdown-menu">
    <p align="right">Logged as <span sec:authentication="name"></span></p>
    <div class="dropdown-divider"></div>
    <!-- 原有的Logout按钮保持不变 -->
    <form action="#" class="float-right" th:action="@{/logout}" method="POST">
      <input type="submit" value="Logout">
    </form>
    <!-- 修改后的Log out "链接" -->
    <form th:action="@{/logout}" method="POST" class="m-0 w-100">
      <button type="submit" class="dropdown-item border-0 bg-transparent text-left p-2 w-100">Log out</button>
    </form>
  </div>
</div>

这里的按钮样式设置：border-0去掉边框，bg-transparent透明背景，text-left和p-2对齐下拉菜单的默认样式，完全模拟链接的视觉效果，同时点击后会正确发送POST请求到退出接口。

方案2：用JavaScript触发隐藏表单提交

如果你不想重复写表单，可以添加一个隐藏的通用退出表单，然后给<a>标签绑定点击事件来提交这个表单：

<div class="logout-dropdown-list float-right">
  <button class="btn btn-secondary btn-md dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
  <div class="dropdown-menu">
    <p align="right">Logged as <span sec:authentication="name"></span></p>
    <div class="dropdown-divider"></div>
    <!-- 隐藏的全局退出表单 -->
    <form id="logoutForm" th:action="@{/logout}" method="POST" class="d-none"></form>
    <!-- 原有的Logout按钮保持不变 -->
    <form action="#" class="float-right" th:action="@{/logout}" method="POST">
      <input type="submit" value="Logout">
    </form>
    <!-- 修改后的Log out链接 -->
    <a class="dropdown-item" href="#" onclick="document.getElementById('logoutForm').submit(); return false;">Log out</a>
  </div>
</div>

return false是为了阻止<a>标签默认的跳转行为，确保只会触发表单提交。

两种方案都能解决你的问题，推荐第一种，因为它不需要依赖JavaScript，更符合HTML语义化的原则。

内容的提问来源于stack exchange，提问作者damianm