[navbar中的bootstrap4下拉菜单推动和移动导航项

Question

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

另外，如果我将类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，但总而言之...静态定位元素是基于其在流中的当前位置，而绝对定位元素是基于其最接近的祖先位置进行定位的。处于活动状态时的下拉列表（因为它是静态的）会覆盖导航中的其余导航项。您不希望这种行为，因此要在下拉菜单中要填充的空间中填充其他元素，您必须为其赋予绝对位置。

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

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

[另外，在上面的演示中，我将'dropdown-toggle'类添加回了按钮，并且可以正常工作。