html - 让 Bootstrap 下拉菜单在 Navbar 中正确显示

Question

对于新手问题，我深表歉意。但是，我一直在尝试修复我的下拉菜单，但我所有的努力都失败了。我希望下拉菜单在用户点击时显示在他们的个人资料图片下方。目前它出现在右边。我在下面列出了我的相关代码和屏幕截图。

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>&nbspSign Up'.html_safe, new_user_registration_path  %></li>
                <li><%= link_to '<i class="fa fa-sign-in" aria-hidden="true"></i>&nbspLog 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{  
	  background-color: #4078c0;
    color: #fff;
    text-decoration: none;
}
#dropdownsmall{
    font-size: 11px;
    color: #8899a6;
}
#dropdownnav{
	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% }
}

Answer 1

在搜索 W3 并查看 LinkedIn Navbar 之后 - 找到了解决问题的方法。我在下面放了我的代码和屏幕截图，以防其他人遇到类似问题。

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>
      <a class="navbar-brand" href="/"></a>
    </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="nav-item btn-group" data-behavior="notifications" id="profilenavbig">
                  <a class="dropdown-toggle nav-link" type="button" data-behavior="notifications-link" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <%= image_tag(current_user.avatar.url(:thumb), id:"round-image-50") %><span class="caret" id="profilecaret"></span>
                    </a>                                        
                <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>                               
                  <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>&nbspSign Up'.html_safe, new_user_registration_path  %></li>
                <li><%= link_to '<i class="fa fa-sign-in" aria-hidden="true"></i>&nbspLog in'.html_safe, new_user_session_path  %> </li>
            <% end %>
        </ul>
    </div>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->

Application.scss

.dropdown-menu:before {
  position: absolute;
  top: -7px;
  right: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.dropdown-menu:after {
  position: absolute;
  top: -6px;
  right: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';
}
.dropdown-menu > li:hover {
    background-color: #4078c0;
    color: #fff;
}
.dropdown-menu > li > a:hover{  
	  background-color: #4078c0;
    color: #fff;
    text-decoration: none;
}
#dropdownsmall{
    font-size: 11px;
    color: #8899a6;
}
#dropdownnav{
	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;
    margin-top: -25%;
    
    overflow: hidden;
    text-align: center;
    img { width: 100% }
}
#profilecaret{
	   margin-top: 45%;
	   margin-left: -5%;	
}