Css Twitter引导导航栏中的表单链接呈现错误

我正在尝试调整现有的Twitter引导导航栏，使其包含一个注销项，该项以表单形式实现：

<div class='navbar'>
<div class='navbar-inner'>
    <div class='container'>
        <a class='brand'>Test</a>
        <ul class='nav'>
            <li><a>Item 1</a></li>
            <li><a>Item 2</a></li>
            <li><form ><a href="submit()">Sign Out</a></form></li>
        </ul>
    </div>
</div>

注销链接的呈现方式与其他导航项不同。我相信这对于熟悉推特引导的人来说是一个简单的解决方案，但我很迷茫，希望能朝着正确的方向努力

我有一个JSFIDLE演示这个问题。

试试这个

<li><a href="submit()">Sign Out</a></li>

删除表单标签

检查此处如果您检查引导代码，您可以看到a样式的选择器仅针对nav中

的直接后代，则

标记正在中断引导CSS

.navbar .nav > li > a

我不确定表单的非定向应用是否正确，但真正简单的解决方法是用表单包装整个导航栏

<form>
    <div class='navbar'><div class='navbar-inner'>
        <div class='container'>
            <a class='brand'>Test</a>
            <ul class='nav'>
                <li><a>Item 1</a></li>
                <li><a>Item 2</a></li>
                <li><a href="submit()">Sign Out</a></li>
            </ul>
        </div>
    </div>
</form>

是的，该标记在引导中有相当多的额外填充，会导致其呈现方式与其他标记不同，并且最终不需要该功能。我确实需要提交表单；有一个隐藏的输入是提交的一部分，但为了简单起见，我在示例中省略了它。