Question

我正在尝试使用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 %}

Answer 1

2件事：

1 - 如果使用bootstrap行和列，则不需要clearfix div。首先删除它。

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

＆＃13;

<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>

＆＃13;

Answer 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>`

显示循环内联html中的元素

2 个答案: