导航栏中的 bootstrap4 下拉菜单推动并移动导航项

Question

我正在使用 Bootstrap4 创建一个导航栏并添加一个导航项按钮以下拉菜单。但问题是，当菜单下拉时，其他导航项会被推来推去（改变位置）。下面的代码演示了最后一个项目的水平推动。但是在包含更多导航项的我的站点中，下拉菜单也会导致其他导航项的垂直移动。

此外，如果我将 class dropdown-toggle 添加到按钮，我会在按钮旁边看到一个非常难看的 expand_more 文本。以下代码有什么问题？

  <nav class="navbar navbar-inverse fixed-top">
    <ul class="nav navbar-nav bd-navbar-nav flex-row">
      <li id="ncx1" class="nav-item">
    item1
      </li>
      <li id="ncx1" class="nav-item">
    item2
      </li>

      <li id="nvps0add" class="nav-item ml-3">
        <div class="dropdown"
             id="add_dropdown"
        >
          <button type="button" class="btn border-0"
             role="button"
                  data-toggle="dropdown"
                  style="padding:0; background: transparent;"
                  aria-haspopup="true" aria-expanded="false"
          >
        dropdown
          </button>
          <div class="dropdown-menu dropdown-menu-right"
               aria-labelledby="add_dropdown"
          >
            <a class="dropdown-item" href="#">
        dropitem1
            </a>
            <a class="dropdown-item" href="#">
        dropitem2
            </a>
          </div>
        </div>
      </li>

      <li id="nvps0delete" class="nav-item ml-3">
        item3
      </li>
    </ul>
  </nav>

Answer 1

演示：https://jsfiddle.net/b23catgp/

解释：

您需要将 css 属性 position 从 static 更改为 absolute 。我已经包含了一个很好的 link 关于区别，但总结一下......静态定位元素基于其在流中的当前位置，而绝对定位元素基于其最接近的定位祖先位置定位。下拉菜单处于活动状态，因为它是静态的，它会推过导航中的其余导航项。您不希望出现这种行为，因此要让其他元素填充下拉列表应该填充的位置 space，您必须给它绝对位置。

您必须添加到现有代码中的内容：

   /* New */
    .dropdown-menu {
      position: absolute !important;
    }

此外，在上面的演示中，我在 'dropdown-toggle' class 中添加回按钮并且它工作正常。

导航栏中的 bootstrap4 下拉菜单推动并移动导航项

bootstrap4 dropdown in navbar pushes and moves nav-items

javascript

navbar

dropdown

bootstrap-4