html - 下拉切换单击仅在中心工作

Question

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

我在这个小部件工具栏上切换引导下拉菜单。

<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;
}

标签： htmlcsstwitter-bootstrap