Bootstrap 和 Jinja - 居中图像

Question

我在我的 Django 项目中使用 Bootstrap3，我想水平并排显示图像，我有：

<div class="row">
    {% for image in images %}
        {% if image.image %}
                <div class="col-lg-4 col-md-4 col-xs-4 thumb">
                    <img class="img-responsive" src="{{ image.image.url }}" />
                </div>
        {% endif %}
    {% endfor %}
    </div>

并且有效。但是图像是从左到右显示的（例如，如果只有 1 张图像，则它固定在左侧并且看起来不太好）。我怎样才能使所有图像始终居中而不依赖于图像数量？

Answer 1

要使列表 if 块在主块中居中而不依赖于子块的数量，您可以像这样使用 css flex + justify-content: center ：

<!-- Without bootstrap -->

<style>
    .images-box {
        display: flex;
        justify-content: center;
      }
</style>

<div class="row images-box">
{% for image in images %}
    {% if image.image %}
            <div class="col-lg-4 col-md-4 col-xs-4 thumb">
                <img class="img-responsive" src="{{ image.image.url }}" />
            </div>
    {% endif %}
{% endfor %}
</div>

<!-- With bootstrap 4 -->

<div class="row d-flex justify-content-center">
{% for image in images %}
    {% if image.image %}
            <div class="col-lg-4 col-md-4 col-xs-4 thumb">
                <img class="img-responsive" src="{{ image.image.url }}" />
            </div>
    {% endif %}
{% endfor %}
</div>

NB : 使用 bootstrap version 4 你必须添加 class="row d-flex justify-content-center" 到 parent div class。如果你被迫使用 V3 然后尝试香草 css 如上所述。

Bootstrap 和 Jinja - 居中图像

Bootstrap and Jinja - centering images

django

jinja2

django-bootstrap3