Question

我想创建一个下拉菜单，例如gmail，wordpress和许多其他应用程序，用户可以点击他的头像来选择菜单项。

这是我所做的，只有当我的头像大小保持在19x19时才有效。如果我尝试增加它的大小，它会弄乱我的导航栏。

有什么建议吗？

<ul class="nav pull-right" id="main-menu-right"  style='font-size:12px;'>
    <% if signed_in? %>
        <li id="fat-menu" class="dropdown">
            <a href="#" id="dropUser" role="button" class="dropdown-toggle" data-toggle="dropdown">

            <%= current_user.avatar_file_name.nil? ? raw("<i class='icon-user'></i>") : image_tag(current_user.avatar.url(:square_tiny), size: '19x19', class: "img-rounded") %>
            <b class="caret"></b>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropUser">       
                 <li><%= link_to raw("<i class='icon-user'></i> My Profile"), "/user_profiles/show", :tabindex => "-1" %></li>

                 <li class="divider"></li>
                 <li><%= link_to raw("<i class='icon-dashboard'></i> Admin dashboard"), admin_dashboard_path, :tabindex => "-1" if current_user.has_role? :admin %></li>
                 <li><%= link_to( raw("<i class='icon-off'></i> Logout"), destroy_user_session_path, :method => :delete) %></li>
            </ul>
              </a>
         </li>
    <% else %>   
        <li>
        <div class="btn-group">
            <%= link_to(raw("<i class='icon-lock'></i> Sign in"), new_user_session_path, :class => 'btn',  style: 'font-size:12px;') %> 
            <%= link_to(raw("Sign up"), new_registration_path(resource_name), :class => 'btn',  style: 'font-size:12px;') %>
        </div>
        </li>
<% end %>

Answer 1

HTML：

        <div class="nav navbar-right">
            <div class="navbar-text">
                <img src="http://placehold.it/60x60" class="profile-image img-circle">
                <a href="#">Username</a>
            </div>
        </div>

CSS：

.navbar .profile-image{
    margin: -10px 0px;
    height: 40px;
}

Answer 2

问题是由于菜单项的默认行高。如果你像这样将头像移出UL，你能否使你的布局工作？ http://jsfiddle.net/panchroma/dJS2k/

我在头像的左侧有个人资料链接，但没有理由不能将它放在下面。

我知道这不完全是你所描述的，但它可以让你使用任何大小的头像。一般的html是：

<navbar>
<img src="avatar.jpg" class="pull-right">
  <ul class="pull-right">
    <li class="dropdown"><li></li>
  </ul>
</navbar>

如何在twitter bootstrap导航栏中允许更大的头像（图像）

2 个答案: