Question

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

<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>

注销链接的呈现方式与其他导航项的呈现方式不同。我确信这对于Twitter Bootstrap中知识渊博的人来说是一个简单的解决方案，但我很失落，并希望能朝着正确的方向努力。

我有一个JSFiddle来演示问题here。

Answer 1

<form>标记正在破坏引导程序CSS，如果您检查引导程序代码，您可以看到样式的选择器仅定位到导航中<li>的直接后代

.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>

Answer 2

试试这个

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

删除表单标记

点击此处JSFiddle

在Twitter Bootstrap Navbar中错误地呈现表单链接

2 个答案: