在for循环内联html中显示元素答案

【问题标题】：Displaying the elements inside for loop inline html在for循环内联html中显示元素
【发布时间】：2018-02-08 07:03:48
【问题描述】：

我正在尝试使用 bootstrap 在单行中显示缩略图中的元素，但是每当我在 for 循环中执行它时，它都会打印在不同的行中。我的代码：

{% for book in all_books %}
<div class="row">
  <div class="clearfix">
    <div class="col-md-2">
      <div class="thumbnail">
        <a href="https://en.wikipedia.org/wiki/Inferno_(Dan_Brown_novel)" 
         target="_blank"><img src="{{book.book_cover}}" alt="Book1" 
        style="width:60%">
          <div class="caption">
            <p>{{book.title}} - {{book.author}}</p>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>
{% endfor %}

【问题讨论】：

标签： html css django bootstrap-4

【解决方案1】：

两件事：

1 - 如果使用引导行和列，则不需要 clearfix div。先把它去掉。

2 - 看起来你在循环错误的 div。完成第 1 点后，将 div 类行移到循环之外。

<div class="row">
{% for book in all_books %}
    <div class="col-md-2">
      <div class="thumbnail">
        <a href="https://en.wikipedia.org/wiki/Inferno_(Dan_Brown_novel)" 
         target="_blank"><img src="{{book.book_cover}}" alt="Book1" 
        style="width:60%">
          <div class="caption">
            <p>{{book.title}} - {{book.author}}</p>
          </div>
        </a>
      </div>
    </div>
{% endfor %}
</div>

【讨论】：

谢谢。效果很好！

【解决方案2】：

这是因为你重复了<div class="row">，试着像这样只为<div class="col-md-2">移动你的for循环

<div class="row">
  <div class="clearfix">
  {% for book in all_books %}
    <div class="col-md-2">
      <div class="thumbnail">
        <a href="https://en.wikipedia.org/wiki/Inferno_(Dan_Brown_novel)" 
         target="_blank"><img src="{{book.book_cover}}" alt="Book1" 
        style="width:60%">
          <div class="caption">
            <p>{{book.title}} - {{book.author}}</p>
          </div>
        </a>
      </div>
    </div>
    {% endfor %}
  </div>
</div>`

【讨论】：