javascript - 如何生成动态列

Question

好吧，假设我有这个:

<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

到目前为止已经有两列了。

现在，假设布局应该动态更改为三列，如下所示:

<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

如何动态插入第三列？

我的 javascript 不存在，我的 jquery 勉强通过。但尽管如此，如果这里需要 javascript 解决方案，请告诉我。

背景信息:这是在使用 Backbone.js 的 ROR 应用程序中。

编辑

需要进一步说明。

那么，假设列不相等，当您动态添加另一列时，如何调整其他列以反射(reflect)附加列？

Answer 1

嗯，看来您正在使用预定的网格系统。这些通常是十二个。这意味着您在任何时候只能拥有 12 个网格。因此，而不是像这样的两列:

   <div class="row">
    <div class="col-xs-6">.col-xs-6</div>
    <div class="col-xs-6">.col-xs-6</div>
    </div>

因为 12 的一半各为 6。这意味着要具有三列，它看起来像这样:

<div class="row">
  <div class="col-xs-4">.col-xs-4</div>
  <div class="col-xs-4">.col-xs-4</div>
  <div class="col-xs-4">.col-xs-4</div>
</div>

因为 12 除以 3 等于 4。要从 2 列创建 3 列，您可以使用 javaScript 或 jQuery。 jQuery 看起来像这样:

$(".row").empty().append("<div class='col-xs-4'>.col-xs-4</div>
  <div class='col-xs-4'>.col-xs-4</div>
<div class='col-xs-4'>.col-xs-4</div>");

请记住，有多种方法可以执行此操作。我认为这可能是最容易理解的!