使用循环引导添加 .row答案

【问题标题】：bootstrap add .row using loop使用循环引导添加 .row
【发布时间】：2016-03-14 12:41:03
【问题描述】：

我想做2列我知道结构是这样的

.row
   .col-md-6
   .col-md-6
.row
   .col-md-6
   .col-md-6

但是如何在javascript中使用循环来编写呢？

    - each obj,index in obj
        if (index > 0)
             .row
                .col-md-6

【问题讨论】：

添加 for 循环为“col-md-6”创建 2 列，或者你想要别的东西？
为什么要添加一个新的“.row”？大于 12 列单位的行将简单地wrap to a new row。
你用的是 Jade 还是什么的？这不是正确的 Javascript 语法

标签： javascript jquery twitter-bootstrap pug

【解决方案1】：

这看起来很简单。您必须创建一个nested for-loop，它会创建x div 类row 和y div 类col-md-6。

var x = 2,
    y = 2,
    colClass = 'col-md-6',
    rowClass = 'row',
    rows = [],
    i, j, currentRow, currentCol;

// Variable x is the amount of rows to create.
for (i = 0; i < x; i++) {

    // Create the row.
    currentRow = document.createElement('div');
    currentRow.classList.add(rowClass);

    // Variable y is the amount of columns to create for each row.
    for (j = 0; j < y; j++) {

        // Create the column.
        currentCol = document.createElement('div');
        currentCol.classList.add(colClass);

        // Append the column to the row.
        currentRow.appendChild(currentCol);
    }

    // Add the row to an array of rows.
    rows.push(currentRow);
}

// Append the rows to something, or do something else with them.
// Below practice could already be done inside the for loop, instead of rows.push(currentRow)
rows.forEach(function (row) {
    document.body.appendChild(row);
});

【讨论】：