Html 使用Bootstrap和Jekyll在3x3网格内打印所有帖子

我正在尝试用Bootstrap4创建一个网格，其中包含3x3网格中的帖子

我现在的代码是：

<div class="col-sm-8" id="main-content">

  <div class="row">

    {% for post in site.posts%}
    <div class="col-sm-4">
      <div class="card" style="width: 20rem;">
        <img class="card-img-top" src="../media/logo-prueba.jpg">
        <div class="card-block">
          <h4 class="card-title">{{ post.title }}</h4>
          <p class="card-text">{{ post.category }}</p>
        </div>
      </div>
    </div>
    {% endfor %}

  </div>

{%用于站点中的帖子。帖子%}
{{post.title}}
{{post.category}
{%endfor%}

col-sm-8的第一个div就在那里，因为我还使用了一个侧边栏

我怎样才能做到这一点？就像打印第3行，然后在下一行打印第3行，最后一行打印第3行

输出是带有3个帖子的输出：

  <div class="row">
    <div class="col-sm-4">
      <div class="card" style="width: 20rem;">
        <img class="card-img-top" src="../media/logo-prueba.jpg">
        <div class="card-block">
          <h4 class="card-title">test1</h4>
          <p class="card-text"></p>
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="card" style="width: 20rem;">
        <img class="card-img-top" src="../media/logo-prueba.jpg">
        <div class="card-block">
          <h4 class="card-title">Otro post!</h4>
          <p class="card-text"></p>
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="card" style="width: 20rem;">
        <img class="card-img-top" src="../media/logo-prueba.jpg">
        <div class="card-block">
          <h4 class="card-title">Calzón chino</h4>
          <p class="card-text"></p>
        </div>
      </div>
    </div>
  </div>
</div>

测试1

奥特罗邮报！

卡尔松·奇诺

---

有什么帮助吗？提前谢谢

为父元素具有百分比宽度的引导元素设置固定的内联宽度不是一个好办法，因为它会破坏响应行为。默认情况下，card元素会占用列中的所有可用空间。如果您希望它更小，请使用卡上的边距，而不是固定宽度（rem等于像素量）。确保图像宽度（仍然）为100%

{%用于站点中的帖子。帖子限制：9%}
{{post.title}}
{{post.category}
{%endfor%}

最后，如评论中所建议的，当第一项或第二项高于第三项时，使用模来防止奇怪的堆叠行为：

{% for post in site.posts limit:9 %}
  {% assign indexmod3 = forloop.index | modulo: 3 %}
  {% if indexmod3 == 0 %}<div style="clear: both;"></div>{% endif %}
  <div class="col-sm-4">
    ...
  </div>
</div>
{% endfor %}

{%用于站点中的帖子。帖子限制：9%}
{%assign indexmod3=forloop.index |模：3%}
{%if indexmod3==0%}{%endif%}
...
{%endfor%}

你确定

site.posts

实际上包含9篇文章吗？你能转储值吗？@fubar事实上我只有2个，它只打印了1个。但是现在我又增加了3个，并打印了它们，除了第一个，我现在也不知道了。我现在要编辑我的问题。当你转储

site.posts

值时发布输出。@fubar完成，检查帖子。如果你输出

site.posts.size

的值，你会得到什么？是否所有的帖子都已发布（即未来的发布日期）？

{% for post in site.posts limit:9 %}
  {% assign indexmod3 = forloop.index | modulo: 3 %}
  {% if indexmod3 == 0 %}<div style="clear: both;"></div>{% endif %}
  <div class="col-sm-4">
    ...
  </div>
</div>
{% endfor %}