Bootstrap popover - 如何固定位置？

Question

如何设置position固定为Bootstrap 4 popover?

Bootstrap 弹出窗口默认为 CSS:

.popover {
     position: absolute;
     top: 0;
     left: 0;
 }

并且每个popover都有JS设置的内联样式：

<div
     class="popover fade bs-popover-right show"
     role="tooltip"
     id="popover706736"
     x-placement="right"
     style="position:absolute;transform:translate3d(302px,157px,0px);top:0px;left:0px;will-change:transform"
>
    <h3 class="popover-header"></h3>
    <div class="popover-body">
        <img class="img-fluid d-block" src="https://via.placeholder.com/600x400/6610f2/ffffff" alt="">
    </div>
</div>

在我的示例中，我覆盖了两种样式，弹出窗口出现在中心，但不是它应该出现的确切位置。带有红色边框的演示元素恰好位于中心，但弹出框略微偏右。

为了更好的外观，我使用自定义弹出框模板删除了箭头。

如何正确设置位置固定到Bootstrap popover??

/*DEMO*/
#demo-buttons{position:absolute;top:10%;left:50%;transform:translate(-50%,-50%)}
#demo-element{width:276px;height:200px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;border:1px red solid}

/*popover override*/
.popover{
    position:fixed!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%) translate3d(0,0,0)!important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>



<div id="demo-buttons">
    <button class="btn btn-danger" data-toggle="popover" data-content="<img class='img-fluid d-block' src='https://via.placeholder.com/600x400/007bff/ffffff' alt=''>">Popover 1</button>
    <button class="btn btn-danger" data-toggle="popover" data-content="<img class='img-fluid d-block' src='https://via.placeholder.com/600x400/28a745/ffffff' alt=''>">Popover 2</button>
    <button class="btn btn-danger" data-toggle="popover" data-content="<img class='img-fluid d-block' src='https://via.placeholder.com/600x400/dc3545/ffffff' alt=''>">Popover 3</button>
    <button class="btn btn-danger" data-toggle="popover" data-content="<img class='img-fluid d-block' src='https://via.placeholder.com/600x400/6610f2/ffffff' alt=''>">Popover 4</button>

</div>


<!--DEMO ELEMENT AT THE CENTER-->
<div id="demo-element"></div>

<script>
$('[data-toggle="popover"]').popover({
    html:       true,
    trigger:    'hover',
    template:   '<div class="popover" role="tooltip"><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
});
</script>

Answer 1

实际上您的代码运行良好，您需要使用 !important 覆盖边距属性以使其居中：

.popover{
    position:fixed!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%) translate3d(0,0,0)!important;
    margin: 0!important;
}

片段：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <style>
        /*DEMO*/
#demo-buttons{position:absolute;top:10%;left:50%;transform:translate(-50%,-50%)}
#demo-element{width:276px;height:200px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;border:1px red solid}

/*popover override*/
.popover{
    position:fixed!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%) translate3d(0,0,0)!important;
    margin: 0!important;

}
    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    </head>
<body>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>



<div id="demo-buttons">
    <button class="btn btn-danger" data-toggle="popover" data-content="<img class='img-fluid d-block' src='https://via.placeholder.com/600x400/007bff/ffffff' alt=''>">Popover 1</button>
    <button class="btn btn-danger" data-toggle="popover" data-content="<img class='img-fluid d-block' src='https://via.placeholder.com/600x400/28a745/ffffff' alt=''>">Popover 2</button>
    <button class="btn btn-danger" data-toggle="popover" data-content="<img class='img-fluid d-block' src='https://via.placeholder.com/600x400/dc3545/ffffff' alt=''>">Popover 3</button>
    <button class="btn btn-danger" data-toggle="popover" data-content="<img class='img-fluid d-block' src='https://via.placeholder.com/600x400/6610f2/ffffff' alt=''>">Popover 4</button>

</div>


<!--DEMO ELEMENT AT THE CENTER-->
<div id="demo-element"></div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
$('[data-toggle="popover"]').popover({
    html:       true,
    trigger:    'hover',
    template:   '<div class="popover" role="tooltip"><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
});
</script>
</body>
</html>

Bootstrap popover - 如何固定位置？

Bootstrap popover - how to set position fixed?

css

popover

twitter-bootstrap

bootstrap-4

如何正确设置位置固定到Bootstrap popover??