0

I'm trying to design a dropdown menu with Glyphicons on Rails 4.0.0 using Bootstrap 3.0.2. However, the Glyphicons and the texts with links don't show up on the same line. Here is my code:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <%= gravatar_for(current_user, size: 20) %> <span class="caret"></span></a>

    <ul class="dropdown-menu">
        <li>
            <a href="#"><span class="glyphicon glyphicon-user"></span> 
            <%= link_to "Profile", current_user %></a>
        </li>

        <li>
            <a href="#"><span class="glyphicon glyphicon-wrench"></span>
            <%= link_to "Settings", edit_user_path(current_user) %></a>
        </li>

        <li class="divider"></li>

        <li>
            <a href="#"><span class="glyphicon glyphicon-off"></span>
            <%= link_to "Sign out", signout_path, method: "delete" %></a>
        </li>
    </ul>
</li>

Now, if I replace the links with pure text, here is my code:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <%= gravatar_for(current_user, size: 20) %> <span class="caret"></span></a>

    <ul class="dropdown-menu">
        <li>
            <a href="#"><span class="glyphicon glyphicon-user"></span> 
            Profile</a>
        </li>

        <li>
            <a href="#"><span class="glyphicon glyphicon-wrench"></span>
            Settings</a>
        </li>

        <li class="divider"></li>

        <li>
            <a href="#"><span class="glyphicon glyphicon-off"></span>
            Sign Out</a>
        </li>
    </ul>
</li>

Now it works perfectly.

Could anyone please help and let me know what was done incorrectly? Thanks a lot!

4

1 回答 1

4

下拉列表中锚点的显示样式设置为block。display:block;将悬停效果设置为菜单的 100% 宽度。

.dropdown-menu > li > a {display:inline;}会将您的链接和字形图标放在一条线上，但会破坏悬停效果。

尝试在链接中添加字形图标：

   <li><a href="#"><span class="glyphicon glyphicon-search"></span> Action</a></li>
于 2013-11-16T19:22:22.890 回答