Bootstrap下拉菜单位置错位问题

Bootstrap下拉菜单的位置出现错位

如果是单按钮的下拉菜单是没有错位问题的，如下图1，不过我这里需要的是拆分按钮的下拉菜单，如下图2

图1
单按钮模式，点击按钮就会出现下拉菜单

图2
左边的按钮点击会弹出弹框，右边的小按钮点击会显示下拉菜单

代码如下：

<div><buttontype="button"class="btn button_create_custom"(click)="openCustomBatchModal()"*ngIf="customBatch == 'create'">{{ "outstanding_batch_create_custom_batch" | translate }}</button><buttontype="button"class="btn button_revert_custom"(click)="openCustomBatchModal()"*ngIf="customBatch == 'revert'">{{ "outstanding_batch_revert_to_previous_batch" | translate }}</button><buttontype="button"class="btn dropdown_custom_batch"data-toggle="dropdown"aria-expanded="false"data-reference="parent"><span class="sr-only"></span></button><div class="dropdown-menu" aria-labelledby="dropdownMenuReference"><a class="dropdown-item" (click)="selectCustomBatch('create')">{{"outstanding_batch_create_custom_batch" | translate}}</a><a class="dropdown-item" (click)="selectCustomBatch('revert')">{{"outstanding_batch_revert_to_previous_batch" | translate}}</a></div></div>

解决方法：

1、网上找到的有的说是用 dropdown-menu-left 可以解决，尝试后发现不行，这个应该是把下拉菜单位置改为下拉按钮下方，并且与按钮的左边对齐。
2、可以修改 dropdown-menu，在 dropdown-menu 里面写好下拉菜单框的位置，此方法还没尝试，可能有点复杂。
3、最后在其他文章中看到是使用了Bootstrap的按钮组.btn-group来做下单菜单的，所以就尝试添加了这个，然后下拉菜单的错位问题就解决了。

效果如下：

代码如下：

<div class="btn-group"><buttontype="button"class="btn button_create_custom"(click)="openCustomBatchModal()"*ngIf="customBatch == 'create'">{{ "outstanding_batch_create_custom_batch" | translate }}</button><buttontype="button"class="btn button_revert_custom"(click)="openCustomBatchModal()"*ngIf="customBatch == 'revert'">{{ "outstanding_batch_revert_to_previous_batch" | translate }}</button><buttontype="button"class="btn dropdown_custom_batch"data-toggle="dropdown"aria-expanded="false"data-reference="parent"><span class="sr-only"></span></button><div class="dropdown-menu" aria-labelledby="dropdownMenuReference"><a class="dropdown-item" (click)="selectCustomBatch('create')">{{"outstanding_batch_create_custom_batch" | translate}}</a><a class="dropdown-item" (click)="selectCustomBatch('revert')">{{"outstanding_batch_revert_to_previous_batch" | translate}}</a></div></div>

还有一个需要留意的是data-reference="parent"，这个是表示下拉菜单的位置是出现在下拉按钮的父级元素底下，如果没有这个，则会出现在下拉按钮的底下，如下图：

如果对你有帮助，可以点赞、收藏和打赏，如有疑问，可以评论，谢谢！