Jekyll中的多行博客列表 [英] Multi-row blog list in Jekyll

问题描述

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

I want to use Jekyll & Bootstrap 3 to present my blog posts in a listing that looks like this:

看看帖子如何按每行2条进行分类？通过Liquid和Bootstrap 3的网格系统能否达到相同的效果？

See how the posts are columnized with 2 per row? Can this same effect be acheived with Liquid and Bootstrap 3's grid system?

推荐答案

这实际上是两个问题。

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

I answered two similar questions yesterday:

• 对于循环，将每两个帖子包装在一个div中
  
  （一种解决方案，用于固定数量的帖子-例如，在首页上以两组为一组-一种用于无限数量帖子的解决方案）


• Jekyll自动处理行
  
  （另一种解决方案，其帖子数是无限的，但每组有四个帖子，并且每个详细的分步说明）

• For loop, wrap every two posts in a div
  (one solution for a fixed number of posts - like the last 10 posts in groups of two on the front page - and one solution for an infinite number of posts)
• Jekyll automatically processing rows
  (another solution with an infinite number of posts, but with four posts per group and with a detailed step-by-step explanation)

Bootstrap具有包含示例设计的页面，您可以窃取该页面。尤其是这两个：

Bootstrap has a page with example designs that you can steal. Especially these two:

• 巨无霸


• 窄巨无霸

• Jumbotron
• Narrow jumbotron

查看示例页面的源代码-基本上，您只需将帖子包装在几个< div> 带有正确的类。

Look at the source code of the example pages - basically, you just have to wrap the posts in a few <div>s with the right classes.

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

For example, this is the source code for the three blocks in the Jumbotron example

<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的类似组合。

You just need to modify the code examples from my other answers (linked above) so that they generate a similar combination of <div>s.

加上，您可能想要阅读有关 Bootstrap的网格系统的信息，以使列正确（例如，类<$ c $上面示例代码中的c> col-md-4 取决于所需的列数）。

Plus, you may want to read about Bootstrap's grid system to get the columns right (e.g. the class col-md-4 in the example code above varies depending on the number of columns you want).

最后，一个真实的例子：我的博客在

这是固定数量的帖子（最后九行，每三行三行），所以我使用的是此答案。

首页的源代码在这里。

请注意，我仍然在Bootstrap 2 （不是3），因此您不能只是从我的源代码中复制并粘贴CSS类！

Finally, a real-world example: My blog has a similar listing on the front page.
This is a fixed number of posts (the last nine, three rows of three), so I'm using the first approach from this answer.
The source code of the front page is here.
Note that I'm still on Bootstrap 2 (not 3), so you can't just copy and paste the CSS classes from my source code!

这篇关于Jekyll中的多行博客列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！