css – Jekyll的多行博客列表

我想用Jekyll& Bootstrap 3将我的博客文章显示在如下所示的列表中：

查看帖子如何按行每列2列？使用Liquid和Bootstrap 3的网格系统可以实现同样的效果吗？

解决方法

这实际上是两个问题.

第一：如何使用Jekyll / Liquid显示每行中的两个帖子？

我昨天回答了两个类似的问题：

> For loop,wrap every two posts in a div
(针对固定数量的帖子的一种解决方案 – 例如首页上的两组中的最后10个帖子 – 以及针对无限数量的帖子的一个解决方案)
> Jekyll automatically processing rows
(另一种解决方案,帖子数量无限,但每组有四个帖子,并有详细的逐步说明)

第二：如何实现类似于Bootstrap屏幕截图中的设计？

Bootstrap有a page with example designs你可以偷.特别是这两个：

> Jumbotron
> Narrow jumbotron

查看示例页面的源代码 – 基本上,您只需将帖子包含在带有正确类的几个< div>中.

例如,这是Jumbotron示例中三个块的源代码

<div class="row">
  <div class="col-md-4">
    <h2>heading</h2>
    <p>blah</p>
  </div>
  <div class="col-md-4">
    <h2>heading</h2>
    <p>blah</p>
 </div>
  <div class="col-md-4">
    <h2>heading</h2>
    <p>blah</p>
  </div>
</div>

您只需要修改我的其他答案(上面链接)中的代码示例,以便它们生成类似的< div>组合.

另外,您可能需要阅读约Bootstrap’s grid system以获得正确的列(例如,上面示例代码中的类col-md-4根据您想要的列数而变化).

最后,一个真实的例子：My blog在首页上有一个类似的列表.
这是一个固定数量的帖子(最后九个,三个三个),所以我使用的是this answer的第一个方法.
The source code of the front page is here.请注意,我仍然使用Bootstrap 2(而不是3),因此您不能只从我的源代码中复制和粘贴CSS类！