Bootstrap下拉菜单位置错位问题

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

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

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

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

代码如下：

<div>
      <button
        type="button"
        class="btn button_create_custom"
        (click)="openCustomBatchModal()"
        *ngIf="customBatch == 'create'"
      >
        {{ "outstanding_batch_create_custom_batch" | translate }}
      </button>
      <button
        type="button"
        class="btn button_revert_custom"
        (click)="openCustomBatchModal()"
        *ngIf="customBatch == 'revert'"
      >
        {{ "outstanding_batch_revert_to_previous_batch" | translate }}
      </button>
      <button
        type="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">
      <button
        type="button"
        class="btn button_create_custom"
        (click)="openCustomBatchModal()"
        *ngIf="customBatch == 'create'"
      >
        {{ "outstanding_batch_create_custom_batch" | translate }}
      </button>
      <button
        type="button"
        class="btn button_revert_custom"
        (click)="openCustomBatchModal()"
        *ngIf="customBatch == 'revert'"
      >
        {{ "outstanding_batch_revert_to_previous_batch" | translate }}
      </button>
      <button
        type="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"，这个是表示下拉菜单的位置是出现在下拉按钮的父级元素底下，如果没有这个，则会出现在下拉按钮的底下，如下图：

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