0
对于新手问题，我表示歉意。但是，我一直在努力修复我的下拉菜单，并且我所有的努力都失败了。我希望下拉菜单在用户点击时出现在其个人资料图片的正下方。目前它看起来在右边。我在下面列出了我的相关代码和屏幕截图。获取Bootstrap下拉菜单在Navbar中正确显示
application.html.erb
application.html.erb<nav class="navbar navbar-default navbar-fixed-top">
<% if notice %>
<div id="notice_wrapper">
<p class="notice"><%= notice %></p>
</div>
<% elsif alert %>
<div id="notice_wrapper">
<p class="alert"><%= alert %></p>
</div>
<% end %>
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><%= link_to '<i class="fa fa-home fa-lg" aria-hidden="true"></i> Home'.html_safe,items_path, id: "zero" %></li>
</ul>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<% if user_signed_in? %>
<li><%= link_to '<i class="fa fa-comments fa-3x" id="zero12" aria-hidden="true"></i>'.html_safe, chatrooms_path %></li>
<li class="nav-item btn-group" data-behavior="notifications" id="notificationbig">
<a class="dropdown-toggle nav-link" type="button" data-behavior="notifications-link" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-flag fa-3x" id="notificationflaggroup" aria-hidden="true"></i> <span data-behavior="unread-count" id="notificationnumber"></span> <span class="caret" id="notificationcaret"></span>
</a>
<ul class="dropdown-menu" data-behavior="notification-items">
</ul>
</li>
<li class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="round-image-50"><%= image_tag(current_user.avatar.url(:thumb)) %></li>
<ul class="dropdown-menu">
<li><%= link_to current_user, class: "username-style" do %>
<div class="text-left" id="dropdownspecial">
<div class="dropdownsmall0"><strong><%= current_user.username %></strong></div>
<div id="dropdownsmall">View Your Profile</div>
</div>
<% end %>
</li>
<li><%= link_to 'Analytics Center', activitycenter_user_url(current_user.id), id:"dropdownnav" %></li>
<li role="separator" class="divider"></li>
<li><%= link_to 'Edit Profile <i class="fa fa-cog fa-lg" aria-hidden="true"></i>'.html_safe, edit_user_registration_path, id:"dropdownnav" %></li>
<li><%= link_to '<i class="fa fa-sign-in" aria-hidden="true"></i> Logout'.html_safe, destroy_user_session_path, method: :delete, id:"dropdownnav" %></li>
<li role="separator" class="divider"></li>
<li><%= link_to 'Help Center', "/pages/help", id:"dropdownnav" %></li>
<li><%= link_to 'Report a Problem',edit_user_registration_path, id:"dropdownnav" %></li>
</ul>
<li><i class="fa fa-th fa-3x" id="tablenav" aria-hidden="true"></i></li>
<li><button type="button" class="btn btn-primary navbar-btn"><%= link_to '<i class="fa fa-pencil-square-o fa-lg" aria-hidden="true"></i> Try Premium for Free'.html_safe, premium_products_path, class: "camera" %></button></li>
<% else %>
<li><%= link_to '<i class="fa fa-user" aria-hidden="true"></i> Sign Up'.html_safe, new_user_registration_path %></li>
<li><%= link_to '<i class="fa fa-sign-in" aria-hidden="true"></i> Log in'.html_safe, new_user_session_path %> </li>
<% end %>
</ul>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
application.scss
.dropdown-menu > li:hover {
background-color: #4078c0;
color: #fff;
}
.dropdown-menu > li > a:hover{
\t background-color: #4078c0;
color: #fff;
text-decoration: none;
}
#dropdownsmall{
font-size: 11px;
color: #8899a6;
}
#dropdownnav{
\t font-size: 13px;
}
#dropdownspecial:hover > #dropdownsmall{
color: #fff;
}
.dropdownsmall0{
color: #333;
}
.round-image-50 {
background-color: white;
border: 1px solid #d9d9d9;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
height: 50px;
width: 50px;
overflow: hidden;
text-align: center;
img { width: 100% }
}
#round-image-50 {
background-color: white;
border: 1px solid #d9d9d9;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
height: 50px;
width: 50px;
overflow: hidden;
text-align: center;
img { width: 100% }
}
您好奥马尔，请给我们呈现的html和css请让我们有你的当前功能[mcve]。 –
@MichaelCoker全都照顾好了。刚刚添加了所有相关的CSS，第一次在Stack Overflow中插入css，所以不得不先弄清楚。再次感谢你！ – Omar
请注意HTML和CSS，而不是ruby模板代码和SCSS。你严格限制那些为了简单的html/css问题而试图翻译所有这些内容的人数。 –