Twitter bootstrap - 右上角的响应式下拉菜单

Question

我有一个codeigniter应用程序，我正在使用bootstrap进行模板化 我有一个主导航栏

<div class="navbar navbar-inverse navbar-fixed-top">..........</div>

并希望为位于右上角的链接添加响应式下拉菜单

我的主要问题是下拉列表有效，但是当下拉菜单显示时它会生成一个滚动并且它不可见（全宽）。

我使用了按钮下拉菜单...其他任何想法/建议？谢谢！

http://twitter.github.com/bootstrap/components.html#buttonDropdowns

Answer 1

看起来你只是使用了错误的组件。您应该使用的是：

http://twitter.github.com/bootstrap/javascript.html#dropdowns

这将允许您将下拉列表构建到导航中，而不是在其中粘贴按钮。使用此方法，当您的浏览器比某个宽度窄时，菜单会向下滑动到层次结构中。

Dropdown 3为您提供HTML，使其像您在屏幕截图中一样漂浮：

<ul class="nav pull-right">
  <li id="fat-menu" class="dropdown">
    <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
    </ul>
  </li>
</ul>