下拉菜单的 dropright 变体在 ng-bootstrap 中不起作用

Question

我正在尝试将 dropright 变体集成到引导下拉列表中。我可以在引导文档中看到它https://getbootstrap.com/docs/4.3/components/dropdowns/#dropright

他们已经给出了代码

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

我想将其集成到 ng-bootstrap.https://ng-bootstrap.github.io/#/components/dropdown/examples 中。他们给出了示例代码https://ng-bootstrap.github.io/stackblitzes/dropdown/basic/stackblitz.html.

我尝试了就像引导文档中一样。

        <div ngbDropdown class="d-inline-block dropright">
            <button type="button" class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>
                Toggle dropdown
            </button>
            <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
                <button ngbDropdownItem>Action - 1</button>
                <button ngbDropdownItem>Another Action</button>
                <button ngbDropdownItem>Something else is here</button>
            </div>
        </div>

但这没有任何作用。感谢您的帮助谢谢

Answer 1

好的需要添加

placement

属性。可能的值位于 https://ng-bootstrap.github.io/#/guides/positioning#api

<div ngbDropdown class="d-inline-block dropright" placement="right-top">

将

dropright

放入课堂将使箭头指向正确的方向