Bootstrap 4 右侧显示子下拉列表

我正在尝试创建一个子下拉列表，它显示的右键与下图相同

但是，当我单击时，它不会打开任何菜单

我的代码：

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Items</a>
    <div class="dropdown-menu shadow p-1 bg-white rounded" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Item1</a>
        <a class="dropdown-item">Item2</a>
        <a class="dropdown-item">Item3</a>
    </div>
</li>

项目2
项目3

此行为需要

dropright

类：

下拉菜单
在下拉菜单旁边添加.dropright类，使下拉菜单右对齐。请注意，插入符号/箭头是自动添加的：

右下角按钮A


右下按钮B