html - Bootstrap 弹出窗口中的组按钮

Question

我有一个 bootstrap 弹出窗口，里面有一个带有“btn-group”样式的 div，它应该打开一个操作菜单 (aria-haspopup="true")。

问题是操作菜单在弹出框边界外打开，当我更改位置/显示属性时，它进入弹出框内但移动了所有文本。

这是整个popover的HBS文件:

<h3 class="popover-title" style="font-weight: bold;">{{title}}
<div style="float: right; text-align:center;"  class="btn-group">
   <button id="{{id}}-actions-button" type="button" class="btn btn-action js-primary-row-action" data-index="-1">{{primaryAction.text}}</button>
   <button type="button" class="btn btn-action dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
	  <li><a href="#">Action</a></li>
	  <li><a href="#">Another action</a></li>
	  <li><a href="#">Something else here</a></li>
	  <li role="separator" class="divider"></li>
	  <li><a href="#">Separated link</a></li>
	</ul>
</div>
</h3>

<div class="row">
    <div style="padding-top:15px;">
    	{{#each rows}}
			<div style="padding-bottom: 20px;">
						<div style="float: left; width: 50%;"><label class="label-preview">{{cell1.label}} </label><div>{{cell1.value}}</div></div>
	                    <div style="float: right; width: 50%; text-align:left;"><label class="label-preview">{{cell2.label}} </label><div>{{cell2.value}}</div></div>
                    
  				<div style="height: 40px;"></div>
			</div>
        {{/each}}
    </div>
</div>

这就是操作弹出窗口的打开方式:

这是我打开弹出窗口的方式:

this.popupElement.popover({
                    template: html,
                    placement: 'right',
                    viewport: viewport
                });

如何打开箭头正下方的操作弹出窗口？

更新:我尝试了 position:absolute - 不工作，我也尝试了下一个组合:position:relative；显示:内联；结果是(如您所见，大弹出框内的字段正在移到一边...): 谢谢。

5.1 更新:

当前位置:

Answer 1

使用 position: absolute 将下拉菜单置于弹出窗口之上。

<h3 class="popover-title" style="font-weight: bold;">{{title}}
    <div style="float: right; text-align:center;"  class="btn-group">
       <button id="{{id}}-actions-button" type="button" class="btn btn-action js-primary-row-action" data-index="-1">{{primaryAction.text}}</button>
       <button type="button" class="btn btn-action dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
    </div>
    </h3>


.dropdown-menu {
  position: absolute:
  top: 20px; // height of the top my-new-title container
}

.btn-group {
  position: relative;
}