0

Bootstrap 3.0.2 を使用して、Glyphicons on Rails 4.0.0 でドロップダウン メニューを設計しようとしています。ただし、グリフィコンとリンク付きのテキストは同じ行に表示されません。これが私のコードです：

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

今では完全に機能します。

誰が助けて、何が間違っていたのか教えてもらえますか? どうもありがとう！

4

1 に答える 1

4

ドロップダウンのアンカーの表示スタイルは に設定されていblockます。display:block;ホバー効果をメニューの幅 100% に設定します。

.dropdown-menu > li > a {display:inline;}リンクとグリフィコンを 1 行に配置しますが、ホバー効果は壊れます。

リンク内にグリフィコンを追加してみてください。

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