css - 下拉菜单没有内容（引导框架）

Question

嗨，我有以下代码用于使用bootstrap-sassgem 的下拉菜单：

<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 中的菜单：

Answer 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();

Answer 2

弄清楚了。不需要collapse第一个 div 中的类。

Answer 3

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

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