bootstrap

Question

我有一个bootstrap的popover，里面有一个带有“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>

这就是动作弹出窗口的打开方式：

这就是我打开popover的方式：

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

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

更新： 我尝试了位置：绝对 - 不工作，我也尝试了下一个组合： 位置：相对;显示：内联; 结果是（正如你所看到的那样，大型弹出窗口内的区域正在移动......）： 感谢。

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