Question

我正在尝试使用Angular 6和ngx-bootstrap（在撰写本文时为3.0.1）重新创建Bootstrap 4组件的基本dropright示例：https://getbootstrap.com/docs/4.1/components/dropdowns/#dropright。我已经找到了使下拉菜单打开（标准）或向上（下拉）的解决方案，但dropright无效。

https://stackblitz.com/edit/ngx-bootstrap-dropdownplacement

在文档中，似乎有一个“放置”输入-https://valor-software.com/ngx-bootstrap/#/dropdowns#dropdown-directive-但没有任何示例，我尝试将其附加到dropdown，dropdownToggle或* dropdownMenu元素中的任何一个上。基本上，这是侧边栏菜单的重要部分，子菜单位于该菜单的右侧。

请问有人可以向我指出正确的方向，以便获得与ngx-bootstrap一起使用的出色功能吗？

旁注：我已经设法使用ng-bootstrap进行此操作，但是如果我不需要的话，也不想切换软件包。

Answer 1

我明白您的意思，但是我认为这是由于引导程序版本而发生的。 https://getbootstrap.com/docs/4.1/components/dropdowns/#dropright 如果您检查此url，您将看到它们使用的是Bootstrap v.4.1，而您使用的是ngx-bootstrap，两者都有不同的CSS类，这就是您面临此问题的原因。

如果您要解决此问题。请执行以下步骤：
1）https://www.npmjs.com/package/bootstrap（npm安装引导程序）
2）比包含在 angular-cli.json 文件中，例如-

"styles": [
   "../node_modules/bootstrap/dist/css/bootstrap.min.css",
   "styles.css"
],

3）从app.module.ts文件中删除您的BsDropdownModule
如果我错过了任何事情，请告诉我

谢谢!!

Answer 2

我找到了使放置工作的解决方案。您应该添加 container="body"，当然还有 placement="top right"。虽然它没有按预期工作

要将其显示在顶部，请使用 [dropup]="true"

ngx-bootstrap Dropdown Dropright放置

2 个答案: