css - 从导航栏品牌打开下拉菜单

Question

每次单击导航栏的品牌时，我都想打开一个下拉菜单(使用 Twitter Bootstrap)，所以我尝试了以下代码:

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="tabbable">
    <div class="dropdown">
    <a id="drop1" class="dropdown-toggle" data-toggle="dropdown" href="#menu">
        <div class="brand">Brand</div>
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
        <li><a href="#">Action</a></li>
    </ul>
    </div>
<ul class="nav">
    <li>
        <a href="#" data-toggle="tab">Item</a>
    </li>
</ul>
</div>
</div>
</div>

结果:当我点击它时，菜单出现了，但它在品牌之上，而不是在之下。如何解决？

例子

• 标准版[确定]:http://jsfiddle.net/4rdPU/2/
• 标准版+div class="brand"【样式问题】:http://jsfiddle.net/4rdPU/1/
• 品牌版本[错误的菜单位置]:http://jsfiddle.net/4rdPU/3/

Answer 1

要正确呈现下拉列表，您的品牌必须是 .nav li 元素。所以只需将 .brand 类添加到标准下拉列表即可。

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="tabbable">
            <ul class="nav">
                <li class="dropdown">
                    <a id="drop1" class="dropdown-toggle brand" data-toggle="dropdown" href="#menu">
                        Brand
                    </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                        <li><a href="#">Action</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#" data-toggle="tab">Item</a>
                </li>
            </ul>
        </div>
    </div>
</div>

这会破坏您的品牌定位，但您可以使用这个简单的 CSS 修复它:

.navbar .brand {
    margin-left: 10px; /* This value could be different for another layout */
}