Question

我正在尝试在我的Django网站上设置一个类似于pinterest.com的网格库。

我有以下HTML代码：

<div class="row text-center text-lg-left">
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="d-block mb-4 h-100">
        {% for img in imgs %}
        <img src="/static/img/{‌{ img }}" class="img-thumbnail" alt="">
        {% endfor %}
      </a>
    </div>
  </div>

这是我的views.py

def gallery(request):
    path = "C:/Users/fela/Pictures/"
    img_list = os.listdir(path)
    return render(request, 'gallery.html', {'imgs': img_list})

上面的代码逐行显示结果，而不是彼此相邻。它每行显示一个结果（图像）（https://image.ibb.co/bVAE9b/result_2.png）。

预期结果应与pinterest类似，它应该是相邻的，以填满屏幕。

我尝试过使用bootstrap 4和bootstrap 3，结果相同。

Answer 1

我能够用另一种方法搞清楚。这是代码，以防它帮助其他人。

 <div style="width:100%">
  {% for img in imgs %}
      <div style="float:left; width:200px; height:200px;">
          <img src="/static/img/{{ img }}" class="img-thumbnail" alt="">
      </div>
  {% endfor%}
  </div>

Answer 2

它应该是这样的

<div class="row">
    {% for img in imgs %}
        <div class="col-lg-3 col-md-4 col-xs-6">
          <a href="#" class="d-block mb-4 h-100">
            <img src="/static/img/{‌{ img }}" class="img-thumbnail" alt="">
          </a>
        </div>
    {% endfor %}
  </div>

您有一个div col-*，但每个图片都应该有自己的。

Django图像网格库

2 个答案: