bootstrap 弹出框内的组按钮

Question

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

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

这是整个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 - 不工作，我也试过下一个组合：位置：相对；显示：内联；结果是（如您所见，大弹出框内的字段正在移到一边...）：谢谢。

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

bootstrap 弹出框内的组按钮

group-buttons inside a popover of bootstrap

html

css

twitter-bootstrap

popup

popover