【问题标题】:Django Image galleryDjango 图像库
【发布时间】:2018-01-02 09:27:04
【问题描述】:

我正在尝试在 Django 中制作一个图片库模板,当它们被添加到博客时,它将拉入新的图片。我想要的是网格中的三或四列缩略图大小的图像。

到目前为止,我的模板如下所示:

{% for image in images %}
    {% if forloop.first %}
        <tr>
    {% endif %}
    <td>
      <a href="{{ image.get_absolute_url }}"> <img src="{{ image.image.url }}" class="img-responsive img-thumbnail" width="304" height="236"/></a>
    </td>
    {% if forloop.last %}
        </tr>
    {% else %}
        {% if forloop.counter|divisibleby:"4" %}
            </tr><tr>
        {% endif %}
    {% endif %}
{% endfor %}

但是,这不会让我像我希望的那样轻松地操作图像 - 我希望使用 Bootstraps 列,但每次我尝试它都会在一个列中给我图像。

【问题讨论】:

  • 你在追求Masonry之类的东西吗?

标签: html css django twitter-bootstrap image


【解决方案1】:

为什么不将以下用于 3 列网格?

(将 col-md-4 更改为 col-md-3 4 列)

<div class="container">
    <div class="row">
    {% for image in images %}
      <div class="col-md-4">
          <a href="{{ image.get_absolute_url }}"> <img src="{{ 
image.image.url }}" class="img-responsive img-thumbnail" width="304" height="236"/>
          </a>
       </div>
    {% endfor %}
    </div>
</div>

【讨论】:

  • 效果很好,目前格式有点乱,但我想我可以用 CSS 清理一下。
猜你喜欢
  • 1970-01-01
  • 2012-06-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-11-21
  • 2018-09-30
  • 2011-04-15
相关资源
最近更新 更多