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

Question

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

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

Answer 1

为父级具有百分比宽度的 Bootstrap 元素设置固定内联宽度不是可行的方法，因为它会破坏响应行为。默认情况下，卡片元素会占用列中的所有可用空间。如果您希望它更小，请在卡片上使用边距而不是固定的(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 %}

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

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