下拉切换点击仅在中心工作

Question

出于某种目的，我正在使用引导程序下拉列表。在模板中，有具有小部件工具栏和小部件主体的小部件。

我要在此小部件工具栏上切换bootstrap下拉菜单。

<div class="widget-toolbar">
    <div class="dropdown">
        <div class="dropdown-toggle" data-toggle='dropdown'>
            <strong>{{selectedContractDetails.range}}</strong>
        </div>
        <div class='dropdown-menu'>
            <p class="rangeData" *ngFor="let r of service.range" (click)="onRangeSelect($event)">{{r.text}}</p>
        </div>
    </div>
</div>

每当我单击<strong>标签时，下拉列表就会切换。它不占用整个小部件工具栏的高度和宽度。如果您看到下面的图片。

左右各有一个8px的填充。因此，每当我单击文本时。下拉列表正在切换。它在填充区域上不起作用。我希望下拉开关能在完整的窗口小部件工具栏上工作。填充物应该在那儿，但不要除去填充物。如果要在下拉菜单中单击任意位置，我想切换下拉菜单。

下面我提到了小部件工具栏的CSS。

.widget-toolbar {
    display: inline-block;
    float: right;
    width: auto;
    height: 32px;
    line-height: 32px;
    position: relative;
    border-left: 1px solid rgba(0,0,0,.09);
    cursor: pointer;
    padding: 0 8px;
    text-align: center;
}