使用引导程序创建计划布局

Question

我需要动态生成计划，如下图所示：

如图所示，某些列需要比其他列长。这会产生在不破坏计划结构的情况下将div叠加在另一个上面的问题。那么，填充这样的表并克服上述问题的最佳方法是什么？

我对这个问题有几点看法，但对我来说似乎都没有。他们在这里：

1）我可以计算哪个列最长，并为每列添加相同数量的单元格，然后用数据填充其中一些。

这种方法

专业：

• 易于实施
• 保留表格结构

缺点：

• 未使用的单元格将添加到表格

2）可以通过利用col-offsets来避免将额外的单元格添加到表中，但计算哪些单元格需要添加col-offset的想法似乎相当痛苦。

3）我可以使用真实的表格，而不是使用div进行黑客攻击，但每次我尝试使用它们时，我最终都会破坏页面结构。

请建议您如何处理这个问题，谢谢。

Answer 1

事实证明，将列堆叠在一起非常简单：

<div class="container">
  <div class="row">
    <div class="col-xs-3">

      <div class="row">
        <div class="col-xs-12">
          <p>YOUR CONTENT</p>
        </div>
        <div class="col-xs-12">
          <p>YOUR CONTENT</p>
        </div>
        <div class="col-xs-12">
          <p>YOUR CONTENT</p>
        </div>
      </div>

    </div>
  </div>
</div>

诀窍是在父列中包含一行，根据您的需要调整大小（在本例中为col-xs-3）。在此之后，只需将大小为*-12的列添加到提到的行，强制它们换行并跳转，但要包含在外部col-xs-3列中。