杰基尔的多排博客列表

Question

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

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

Answer 1

这实际上是两个问题.

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

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

• 对于循环,在div中包含每两个帖子
  (一个固定数量的帖子的解决方案 - 就像首页上的两个组中的最后10个帖子 - 以及无限数量的帖子的一个解决方案)
• Jekyll自动处理行
  (另一个解决方案具有无限数量的帖子,但每组有四个帖子,并有详细的逐步说明)

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

Bootstrap有一个页面,其中包含可以窃取的示例设计.特别是这两个:

• 超大屏幕
• 狭窄的jumbotron

查看示例页面的源代码 - 基本上,您只需要<div>使用正确的类将文章包装在几个s中.

例如,这是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>s 组合.

另外,您可能想要了解Bootstrap的网格系统以获得正确的列(例如,col-md-4上面示例代码中的类根据您想要的列数而变化).

最后,一个真实的例子:我的博客在首页上有一个类似的列表.
这是一个固定数量的帖子(最后九个,三个三个),所以我正在使用这个答案中的第一个方法.
首页的源代码在这里.
请注意,我仍然使用Bootstrap 2(而不是3),因此您不能只从我的源代码中复制和粘贴CSS类!