下拉菜单没有内容（引导框架）答案

【问题标题】：Dropdown has no content (bootstrap framework)下拉菜单没有内容（引导框架）
【发布时间】：2012-06-10 02:18:58
【问题描述】：

您好，我有以下代码用于使用 bootstrap-sass gem 的下拉菜单：

<div class="nav-collapse collapse" style="height:0px;">
            <nav>
              <ul class= "nav pull-right">
                <% if signed_in? %>
                    <li><%= link_to "Profile", current_user %></li>
                  <li><%= link_to "Users", users_path %></li>
                  <li id = "fat-menu" class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                      Account <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                      <li><%= link_to "Settings", edit_user_path(current_user) %></li>
                      <li class="divider"></li>
                      <li>
                        <%= link_to "Sign out", signout_path, method: "delete" %>
                      </li>
                    </ul>
                  </li>
                  <% else %>
                    <li><%= link_to "Sign In", signin_path %></li>
                <%end%>
              </ul>
            </nav>
        </div>

但是，当我点击Account 时，它只显示以下内容，而不是内容：

您可以看到一个白色的小三角形，表示它已被点击但没有内容。当我调试时，我还可以在这里看到 chrome 中的菜单：

【问题讨论】：

你是否也包含了 bootstrap js 文件？不确定是否有必要，但值得一看。
是的，包括在内。我想这就是为什么会出现白色小三角形的原因。

标签： css ruby-on-rails twitter-bootstrap

【解决方案1】：

代替：

<a href="#" class="dropdown-toggle" data-toggle="dropdown">
  Account <b class="caret"></b>
</a>

你应该使用：

<a href="#fat-menu" class="dropdown-toggle" data-toggle="dropdown">
  Account <b class="caret"></b>
</a>

另外，请提供启用此菜单的 JavaScript 文件（它不仅包括 JS 文件，您必须在某处启用下拉菜单）。它看起来像这样：

$(".dropdown-toggle").dropdown();

【讨论】：

我使用的是 bootstrap-sass gem，它不是默认在里面完成的吗？

【解决方案2】：

想通了。第一个 div 中不需要 collapse 类。

【讨论】：

【解决方案3】：

如果您确实想在第一个 div 中折叠，请使用：

.collapse .dropdown{
  overflow: visible !important;
}

【讨论】：