Bootstrap popover按下按钮

Question

我在我的图片上使用bootstrap popover。

当我点击图片时，它会显示弹出窗口很好但按钮因某种原因被按下。

问题：无论图像大小是多少，如何使按钮在线上显示内联按钮弹出窗口。

Codepen示例here

<script type="text/javascript">
$(document).ready(function() {
    var popupElement = '<div class="btn-group btn-toggle"><button class="btn btn-sm btn-info">On</button><button class="btn btn-sm btn-primary active">Off</button></div>';

    $('#image').popover({
        animation: true,
        content: popupElement,
        html: true
    });
});   
</script>

查看

<div class="container">
<div class="row">
<div class="col-lg-3 col-lg-offset-1">
<img id="image" src="holder.js/100px164" class="img-thumbnail img-responsive">  
</div>  
</div>  
</div>

图像

Answer 1

您可以在css上添加以下代码

.btn-group{display: flex;}

或有人有任何想法？

Answer 2

Here是你笔的工作分叉。我只是将它添加到CSS中。似乎popover缺少宽度来显示内联按钮：

.popover  {
  width: 110px;
}

Answer 3

另一种使这项工作的方法是向容器元素添加宽度。像这样：

.btn-group {
  width: 100px; //sample value
}

我希望以某种方式帮助