如何将下拉菜单放置在我想要的位置？

Question

我的下拉菜单发生了一些奇怪的事情。在我的导航栏中，我有两个下拉菜单，一个是用户菜单，另一个是通知菜单。用户的菜单工作得很好，但是，当我点击通知时，它的下拉菜单显示在我网站的左侧。当我将dropdown-menu-right 添加到它时，它会向右移动，但它会一直向右移动。有没有办法可以将下拉菜单放在“聊天”气泡图标下方？ （我使用的是 Bootstrap 4）。

如果我不将 dropdown-menu-right 添加到我的 html 中，就会发生这种情况：

如果我将 dropdown-menu-right 添加到我的 html 中，会发生这种情况：

这是我的通知下拉html

    <a href="#" class="nav-link dropdown-toggle user-menu-link" data-toggle="dropdown" role="button" 
    aria-haspopup="true" aria-expanded="false"><i class="fas fa-comment"></i>
        <ul class="dropdown-menu message-notification-dropdown dropdown-menu-right">
            <div>
                <li>
                    <a href="#">Message 1</a>
                </li>
            </div>
        </ul>
      </a> 

Answer 1

查看我的 html 后，我意识到我放错了下拉菜单。对于之前没有注意到这一点，我深表歉意。