Question

我已经面临这个问题一天左右了。基本上我有这个代码

<div class="container">
 <div class="row">
 {% for post in posts %}

  <div class="col-md-6">
   <div class="thumbnail">
    <img src="{{ post.image.url }}" alt="...">
     <div class="caption">
     <h3>{{ post.title }}</h3>
     <p>{{ post.body|truncatechars:120 }}</p>
     <p><a href="#" class="btn btn-primary" role="button">View</a></p>
    </div>
   </div>
  </div>

 {% endfor %}
 </div>
</div>

我想让两个列彼此相邻，并显示图像。当第一行正常时，2个图像正确显示，但在第二行只显示一个。没有边距或填充阻止每个第二行显示两个图像。

Image for the issue here

Answer 1

我可以从你可以开始的地方建议一件事。使每个帖子的文本和图像完全相同。重新加载并查看内容是否正常显示。如果是的话，你将不得不遵循@richfinelli提出的建议，并在开发工具的高度上玩。

Answer 2

也许首先使用浏览器的开发工具添加.testsettings，看看是否存在高度不同的容器问题。可能这可能是你的CSS规则集：

min-height

即使您的屏幕截图使图像看起来大致相同，但由于容器的高度不同，您可能会遇到此问题。

Answer 3

您可以通过在每两次迭代后添加clearfix来解决此问题（因为您要在每行中划分两列col-md-6）。

<div class="container">
    <div class="row">
    {% for post in posts %}

        <div class="col-md-6">
            <div class="thumbnail">
                <img src="{{ post.image.url }}" alt="...">
                <div class="caption">
                    <h3>{{ post.title }}</h3>
                    <p>{{ post.body|truncatechars:120 }}</p>
                    <p><a href="#" class="btn btn-primary" role="button">View</a></p>
                </div>
           </div>
       </div>
   {% if forloop.counter|divisibleby:2 %}
       <div class="clearfix"></div>
   {% endif %}

   {% endfor %}
</div>

显示图像时引导布局问题

3 个答案: