使用 Bootstrap 和 Jekyll 打印 3x3 网格内的所有帖子答案

【问题标题】：Print all posts inside a 3x3 grid with Bootstrap and Jekyll使用 Bootstrap 和 Jekyll 打印 3x3 网格内的所有帖子
【发布时间】：2018-01-07 23:20:06
【问题描述】：

我正在尝试使用 Bootstrap 4 创建一个网格，其中包含我在 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>

第一个带有 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>

有什么帮助吗？提前致谢！

【问题讨论】：

您确定site.posts 实际上包含9 个帖子吗？你能转储价值吗？
@fubar 实际上我只有 2 个，它只打印了 1 个。但是现在我又添加了 3 个并打印它们，除了第一个，我现在也没有。我现在将编辑我的问题。
转储site.posts值时发布输出。
@fubar 完成，查看帖子。
如果你输出site.posts.size的值，你会得到什么？是否所有帖子都已发布（即未来的日期）？

标签： html css twitter-bootstrap jekyll

【解决方案1】：

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

{% for post in site.posts limit:9 %}
<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 %}

最后，按照 cmets 中的建议，当第一项或第二项高于第三项时，使用模数来防止奇怪的堆叠行为：

{% 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 %}

【讨论】：