引导弹出窗口移位答案

【问题标题】：Bootstrap popover shifting引导弹出窗口移位
【发布时间】：2015-07-26 15:15:04
【问题描述】：

如何使用 bootstrap popover 实现以下目标：

弹出框显示在被触发元素的最右侧。小提琴：https://jsfiddle.net/DTcHh/10435/ 我想要面板外的弹出框。

更新popover css（使用javascript）的left（或其他位置）规则无济于事，因为它在显示popover时被覆盖。如果我更改shown.bs.popover 事件的位置，那么原始位置会显示几毫秒。

谢谢。

【问题讨论】：

标签： javascript css twitter-bootstrap popover

【解决方案1】：

您可以在 css 中使用 !important 覆盖弹出框的定位。可能不是一个非常优雅的解决方案，但它确实有效。

.panel-body .popover {
    left: 20px !important;
}

检查此代码sn-p：

$(document).ready(function(){

    $("[data-toggle='popover']").popover();
    
});

.panel {
    width:50%;
    margin-left: auto;
    margin-right: auto;
}

.panel-body .popover {
    left: 20px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="panel">
    <div class="panel-body">
        <input type="text" id="text_input" data-toggle="popover"
        data-content="blah" data-trigger="focus" data-placement="left"/>
    </div>
</div>

【讨论】：

谢谢..是的，它不太优雅。这似乎是一个非常常见的情况，所以我认为有更优雅的东西。