Bootstrap popover - 如何设置固定位置？答案

【问题标题】：Bootstrap popover - how to set position fixed?Bootstrap popover - 如何设置固定位置？
【发布时间】：2019-08-30 21:01:00
【问题描述】：

如何将位置固定到 Bootstrap 4 弹出框？

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>

在我的示例中，我覆盖了两种样式，并且弹出框出现在中心，但不完全是它应该在的位置。带有红色边框的 Demo 元素正好在中心，但 popover 稍微靠右。

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

如何正确设置固定到 Bootstrap 弹出框的位置？

/*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>

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4 popover

【解决方案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>

【讨论】：

你是对的！ margin:0!important 解决了这个问题。我仔细检查并留下此评论以供参考。边距不是在.popover 类中设置的，而是在此处设置：.bs-popover-right, .bs-popover-auto[x-placement^="right"]{margin-left:0.5rem}
我想知道为什么不制作自己的标记而不是 BS -。当你想做一些自定义的事情时，你应该真正挖掘代码......很好！