Python Bootstrap3使用in-Django模板在每行显示3篇博客文章

我正在使用Django（2.1.7）和Bootstrap（3.1）进行一个项目，我需要在每行显示3篇博客文章：

注意：我查看了各种相关问题，但找不到任何针对我问题的解决方案，因此请不要将此问题标记为重复问题

以下是我尝试过的：

<div class="container-fluid">
        <div class="row">
            <div class="col">
                <div class="col-lg-9">
                    <div class="row">
                        {% for post in posts %}
                            <div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
                                <div class="card shadow border-0 h-100"><a href="post.html">
                                    <img src="{{ post.photo.url }}"
                                        alt="..." class="img-fluid card-img-top"></a>
                                    <div class="card-body"><a href="{% url 'blog-post' post.id %}"
                                                              class="text-uppercase text-muted text-sm letter-spacing-2">{{ post.category }} </a>
                                        <h5 class="my-2"><a href="post.html" class="text-dark">{{ post.title }}</a></h5>
                                        <p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>{{ post.created_at }}</p>
                                        <p class="my-2 text-muted text-sm">{{ post.content }}</p><a
                                                href="{% url 'blog-post' post.id %}" class="btn btn-link pl-0">Read more<i
                                                class="fa fa-long-arrow-alt-right ml-2"></i></a>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="col-lg-3" style="background-color: darkgrey; height: 100%">
                    <div class="container">
                        <form class="form" style="margin-top: 3%">
                            <input type="search" name="search" />
                            <button type="submit">Search</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

在第一行的safari中，它仅显示2篇博文，但在其他行中，它显示3篇博文，请参见下面的屏幕截图：

更新：以下是从浏览器中生成的HTML：

2019年3月7日上午6:11

这是第一个博客

2019年3月7日上午6:14

这是第二个
2019年3月7日上午6:12

这是第三篇博文

2019年3月7日上午6:12

这是另一个
2019年3月7日上午7:43

这是这个博客上的第五篇文章。这是这个博客上的第五篇文章。这是这个博客上的第五篇文章。这是这个博客上的第五篇文章。这是这个博客上的第五篇文章。这是这个博客上的第五篇文章。这是这个博客上的第五篇文章。这是这个博客上的第五篇文章。这是第五篇文章在这个博客上。这是这个博客上的第五篇文章。这是这个博客上的第五篇文章。这是这个博客上的第五篇文章。这是这个博客上的第五篇文章。这是这个博客上的第五篇文章。这是这个博客上的第五篇文章。这是这个博客上的第五篇文章。这是这篇博客上的第五篇文章
2019年3月7日上午6:12

这是BRT网站的第六篇博文

这里有什么问题？我是新手

提前谢谢

试试这个

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

       <div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
           <div class="card shadow border-0 h-100"><a href="post.html">
               <img src="{{ post.photo.url }}"
                   alt="..." class="img-fluid card-img-top"></a>
               <div class="card-body"><a href="{% url 'blog-post' post.id %}"
                                         class="text-uppercase text-muted text-sm letter-spacing-2">{{ post.category }} </a>
                   <h5 class="my-2"><a href="post.html" class="text-dark">{{ post.title }}</a></h5>
                   <p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>{{ post.created_at }}</p>
                   <p class="my-2 text-muted text-sm">{{ post.content }}</p><a
                           href="{% url 'blog-post' post.id %}" class="btn btn-link pl-0">Read more<i
                           class="fa fa-long-arrow-alt-right ml-2"></i></a>
               </div>
           </div>
       </div>

{% if forloop.counter|divisibleby:3 %}

</div><!-- close existing row and open another one-->      
<div class="row">
{% endif %}
   {% endfor %}
</div>

{posts%%中的post为%s}
{{post.created_at}
{{post.content}
{%if-forloop.counter | divisibleby:3%}
{%endif%}
{%endfor%}

试试这个

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

       <div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
           <div class="card shadow border-0 h-100"><a href="post.html">
               <img src="{{ post.photo.url }}"
                   alt="..." class="img-fluid card-img-top"></a>
               <div class="card-body"><a href="{% url 'blog-post' post.id %}"
                                         class="text-uppercase text-muted text-sm letter-spacing-2">{{ post.category }} </a>
                   <h5 class="my-2"><a href="post.html" class="text-dark">{{ post.title }}</a></h5>
                   <p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>{{ post.created_at }}</p>
                   <p class="my-2 text-muted text-sm">{{ post.content }}</p><a
                           href="{% url 'blog-post' post.id %}" class="btn btn-link pl-0">Read more<i
                           class="fa fa-long-arrow-alt-right ml-2"></i></a>
               </div>
           </div>
       </div>

{% if forloop.counter|divisibleby:3 %}

</div><!-- close existing row and open another one-->      
<div class="row">
{% endif %}
   {% endfor %}
</div>

{posts%%中的post为%s}
{{post.created_at}
{{post.content}
{%if-forloop.counter | divisibleby:3%}
{%endif%}
{%endfor%}

仍然不工作，不是它在第一行显示2篇文章，然后在下一行显示1篇文章，然后在下一行显示2，依此类推…您能检查/发布从浏览器的“查看源代码”选项中获取的生成HTML代码的相关部分吗？仍然不工作，不是它先显示2篇文章，然后在下一行显示1篇文章，然后再在下一行显示2等等…你能检查/发布从浏览器的查看源代码选项中获取的生成HTML代码的相关部分吗？生成的HTML很好，为我提供了完美的两行3列（不过，有一个空行需要通过添加另一个条件来删除）。您可能有其他干扰布局的东西？有没有办法共享演示链接？它不仅在safari中工作！当使用felxbox时，iOS浏览器中似乎有一个bug（请参阅）.让我问一下，当你有引导css时，为什么你需要flexbox？生成的html很好，为我提供了完美的两行3列（尽管有一个空行需要通过添加另一个条件来删除）。您可能会遇到其他干扰布局的问题？是否可以共享演示链接？它不仅在safari中工作！在使用felxbox时，iOS浏览器中似乎存在错误（请参阅）。让我问一下，当您使用引导css时，为什么需要flexbox？

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

       <div class="col-lg-4 col-sm-6 mb-4" style="margin-top: 2%">
           <div class="card shadow border-0 h-100"><a href="post.html">
               <img src="{{ post.photo.url }}"
                   alt="..." class="img-fluid card-img-top"></a>
               <div class="card-body"><a href="{% url 'blog-post' post.id %}"
                                         class="text-uppercase text-muted text-sm letter-spacing-2">{{ post.category }} </a>
                   <h5 class="my-2"><a href="post.html" class="text-dark">{{ post.title }}</a></h5>
                   <p class="text-gray-500 text-sm my-3"><i class="far fa-clock mr-2"></i>{{ post.created_at }}</p>
                   <p class="my-2 text-muted text-sm">{{ post.content }}</p><a
                           href="{% url 'blog-post' post.id %}" class="btn btn-link pl-0">Read more<i
                           class="fa fa-long-arrow-alt-right ml-2"></i></a>
               </div>
           </div>
       </div>

{% if forloop.counter|divisibleby:3 %}

</div><!-- close existing row and open another one-->      
<div class="row">
{% endif %}
   {% endfor %}
</div>