如何讓一個更大的頭像（圖片）在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

回答

相關問題