Question

我希望你能解决一些小问题。现在我正在使用Django开发一个小型的Listing-App项目。我已经为它创建了我的主HTML文件，并有一个小桌子，其中Django加载内部电影列表，这些电影有一个标题是一个链接，如果你将鼠标悬停在这个链接上，一个popover（来自bootstrap 4）显示电影中的小预览图像。现在问题是Popover并不总是100％居中。大多数情况下，popover看起来像这样：

但话说回来，有时候（就像7部电影中的2部分一样）看起来像这样：

奇怪的是，这种情况主要发生在您第一次通过链接悬停时并且它不会一直发生，有时它也会在您徘徊2-3次之后发生。我寻找了很多解决方案，但找不到任何帮助。我的代码如下：

{% extends "consilium/base.html" %}

{% block body %}
<table class="table">
<thead>
    <tr>
        <th></th>
        <th colspan="2">My Movielist</th>
        <th>
    </tr>
    <tr>
        <th></th>
        <th>TITLE</th>
        <th>GENRE</th>
        <th>RELEASE DATE</th>
        <th>DIRECTOR</th>
        <th>RUNTIME</th>
        <th>STATUS</th>
        <th>IMDB</th>
    <tr>
</thead>
</tbody>
{% if latest_movie_list %}
    {% for movie in latest_movie_list %}
    <tr>
        <td></td>
        <td>
            <a href="#" data-toggle="popover" data-placement="bottom" data-content='<img class="title-image" src="{{movie.image.url}}"/>'>{{ movie.title }}</a>
        </td>
        <td>{{ movie.get_genre_display}}</td>
        <td>{{ movie.date}}</td>
        <td>{{ movie.director}}</td>
        <td>{{ movie.runtime}} min</td>
        <td>{{ movie.get_status_display}}</td>
        <td>{{ movie.imdb}}</td>
    </tr>
    {% endfor %}
{% else %}
    <tr>
        <td>No Movies are available.</td>
    </tr>
{% endif %}
</tbody>
 </table>
{% endblock %}

使用Javascript：

 $(function () {
   $('[data-toggle="popover"]').popover({
html: true,
trigger: "hover",
container: 'body',
   })
 })

数据内容img标签中的“title-image”类的宽度也是100％。

我希望有人能为此提出解决方案。这不是一个悲剧性的错误，但知道如何修复它会很好:)

感谢所有试图帮助我的人！

Bootstrap Popover不居中

0 个答案: