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>