当我点击它时，导航栏下拉项目被移动

Question

我正在尝试设置一个导航栏，其中包含多个向右对齐的项目。

问题是当我点击“通知”图标时，我的下拉菜单显示，但我的图标在导航栏中移动而不是保持固定，我不明白为什么

这是我的代码：

HTML：

<nav class="navbar navbar-expand-lg navbar-dark bg-secondary justify-content-end">
  <ul class="navbar-nav menu-right">
    <div class="child child-right">    

      <!-- Parameters item -->
      <li class="nav-item">
        <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fa fa-cog"></i>
          <span class="badge-sonar"></span>
        </a>
        <div class="dropdown-menu parametres" aria-labelledby="dropdownMenuMessage">
          <a class="dropdown-item" href="#">My profile</a>
          <a class="dropdown-item" href="#">Help</a>
          <a class="dropdown-item" href="#">Setting</a>
        </div>
      </li>

      <!-- Notifications item -->
      <li class="nav-item">
        <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fa fa-bell"></i>
        </a>
        <div class="dropdown-menu notifications" aria-labelledby="dropdownMenuMessage">
          <div class="notifications-header">
            <i class="fa fa-bell"></i>
            Notifications
          </div>

          <!-- Notification content -->
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">
            <div class="notification-content">
              <div class="icon">
                <i class="fas fa-check text-success border border-success"></i>
              </div>
              <div class="content">
                <div class="notification-detail">Lorem ipsum dolor sit amet consectetur adipisicing
                  elit. In totam explicabo</div>
                <div class="notification-time">
                  6 minutes ago
                </div>
              </div>
            </div>
          </a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item text-center" href="#">View all notifications</a>
        </div>

      </li>
    </div>

  </ul>
</nav>

SASS：

.navbar {
    overflow: visible;
    height: 56px;
    z-index: 9999;
}

.notifications {

    max-width: 250px;
    margin-left: -200px;
    margin-top: 5px;


    .dropdown-item {
        padding: .25rem 1rem;
    }

    .notifications-header {
        padding: 0 1rem;
    }

    .notification-content {
        display: flex;

        .icon {
            width: 40px;
            height: 40px;

            i {
                width: 35px;
                height: 35px;
                text-align: center;
                line-height: 35px;
            }
        }

        .content {
            line-height: 1.6;
            padding-left: 5px;
            width: calc(100% - 40px);

            .notification-time {
                font-size: .7rem;
                color: #828282;
            }

            .notification-detail {
                font-size: 12px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}

.child {
    display: flex;
    flex-flow: row nowrap;
    flex-grow: 0;
    justify-content: flex-start;
    align-items: stretch;
}

.child.child-right {
    flex-grow: 1;
    justify-content: flex-end;
}

.child>li{
    padding-right: 50px;
}

还有 jsfiddle：https://jsfiddle.net/kiuega/beat2zmn/11/ 有人可以帮我吗？

Answer 1

样式被navbar.scss 覆盖，就像下拉是静态位置而不是绝对位置，所以这里是解决方案

将这些样式添加到您的样式表中

.child > li {
  padding-right: 50px;
  position: relative;
}
.navbar-nav .dropdown-menu {
    position: absolute;
    float: none;
}

Answer 2

检查边距和填充（在孩子中）检查检查元素并查看女巫元素改变他的位置

Answer 3

如果您在浏览器中打开 devtools，您将在下拉面板中看到这些类： .navbar-nav .dropdown-menu

（被 navbar.scss 覆盖）

如果您删除“position: static”，它将按预期工作。

并使用 top 和 left 属性来获得正确的位置。