希望有人能提供解决这个问题的方法。我的情况是我有一个具有引导弹出效果的链接,每次将鼠标悬停在它上面时,它都会显示一个图像。但问题是,当您第一次将鼠标悬停在链接上时,弹出窗口容器总是偏移。我的代码:
我自己的代码是这样的:
<a href="{% url 'consilium:detail' movie.slug %}" class="thumbnail title-link" {% if movie.image %} data-toggle="popover" data-placement="left" data-full="{{movie.image.url}}" {% endif %}>
<span class="flex-input">
<input class="get-title" value="{{ movie.title }}" form="movie{{ forloop.counter }}" name="title" readonly/>
</span>
</a>
body .popover {
max-width: 240px;
}
.hover-image {
width: 180px;
}
-
$(document).ready(function() {
$('[data-toggle="popover"]').popover({
container: 'body',
html: true,
placement: 'left',
trigger: 'hover',
content: function() {
var url = $(this).data('full');
return '<img class="hover-image" src="' + url + '">'
}
});
});
这是一个活生生的例子:
有人知道怎么解决吗?
最佳答案
发生这种情况的原因是因为 Bootstrap 在调用弹出窗口后立即将其绝对定位在文档上。然后加载图像并更改弹出窗口高度 - 但是,弹出窗口不会重新定位。
您可以为弹出窗口设置一个最小高度,这样它就不会改变高度,因此不需要重新定位。根据您的示例图片,将 css 更改为:
body .popover {
max-width: 240px;
min-height: 160px;
}
关于javascript - Bootstrap 弹出窗口在第一次悬停时偏移,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42901458/