Question

我正在尝试使用Bootstrap 3.0.2在Rails 4.0.0上设计带有Glyphicons的下拉菜单。但是，Glyphicons和带链接的文本不会出现在同一行上。这是我的代码：

<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>

现在，如果我用纯文本替换链接，这是我的代码：

<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>

现在它完美无缺。

有人可以帮忙，让我知道做错了什么吗？非常感谢！

Answer 1

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

.dropdown-menu > li > a {display:inline;}会将您的链接和glyphicon放在一行，但会打破悬停效果。

尝试在链接中添加glyphicon：

   <li><a href="#"><span class="glyphicon glyphicon-search"></span> Action</a></li>

不同行上的glyphicon和文本链接

1 个答案: