Question

目前，我的引导程序下拉列表如下：

“注销”按钮可以正常工作，但是以某种方式，“注销”链接不起作用。您可以看一下并修复我的“注销”链接吗？

<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 action="#" class="float-right" th:action="@{/logout}" method="POST">
            <input type="submit" value="Logout">
        </form>
        <a class="dropdown-item" href="#" th:action="@{/logout}" method="POST">Log out</a>
    </div>
</div>

Answer 1

            **HTML**

            <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>
                    <div class="custom-dropdown-item">
                      <form action="#" th:action="@{/logout}" method="POST">
                        <input type="submit" value="Logout" class="dropdown-item">
                    </form>
                    </div>

                    <a class="dropdown-item" href="#" th:action="@{/logout}" method="POST">Log out</a>
                </div>
            </div>


            **CSS**
            .custom-dropdown-item{display:block;}
            .custom-dropdown-item input{border:none !important; border-radius:none !important; cursor:pointer; outline:none !important; box-shadow:none !important;}

            DEMO: https://jsfiddle.net/0fpgLk6h/

如何修改下拉列表？

1 个答案: