如何让一个更大的头像（图片）在twitter引导navbar

我想创建一个下拉菜单，如gmail，wordpress和许多其他应用程序，用户可以点击他的头像来选择一个菜单项。如何让一个更大的头像（图片）在twitter引导navbar

这是我所做的，只有当我的头像尺寸保持为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 %>

来源

2013-03-22 zabumba

你可以提供一个测试页？ – Shail 2013-03-23 02:44:58

问题是因为默认的行hieght的菜单项。如果你像这样将化身从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>

来源

2013-03-22 17:33:47

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

来源

2014-11-24 15:30:22

我找到的更清洁的解决方案 – Alexis 2015-01-21 04:08:16

如何让一个更大的头像（图片）在twitter引导navbar

回答

相关问题