css - Jekyll中的多行博客列表

我想使用Jekyll＆Bootstrap 3在 list 中显示我的博客文章，如下所示:

看看帖子如何按每行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在首页上有一个类似的 list 。
这是固定数量的帖子(最后九个，三个三行)，所以我使用了this answer中的第一种方法。
The source code of the front page is here。
注意，我仍然在Bootstrap 2(不是Bootstrap 2)上，所以您不能只是从源代码中复制和粘贴CSS类!

关于css - Jekyll中的多行博客列表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20979305/

bootstrap

css - Jekyll中的多行博客列表