在Bootstrap中对齐未知数量的未知加长元素

Question

我正在尝试构建一个类似于表格的页面来输入指标。我网站的用户将查看有关资金支出的提案，然后在单独的页面上填写多个inputs。 inputs对应有关提案的问题。

问题本身可能非常冗长，每个提案可能有不同的问题，我从配置文件加载。这意味着我不知道并且无法解决问题的数量或问题的长度。

所以我需要这个表格，如果有必要，由于问题的长度，可以将自己包裹起来。这就是Bootstrap的用武之地。我最初试图引导整个表，但结果真的很长而且被压扁了。然后我尝试将每个问题输入到它自己的单独div中，并将所有这些放在一行中。但是，结果看起来很愚蠢。

在阅读How can I make Bootstrap columns all the same height?之后，我尽力让每一行问题达到相同的高度，但第一个选项是保持响应能力的唯一选项无法正常工作。

一个非常棒的答案是任何能告诉我如何在多个div中保持偶数行的人，其中每个div至少与同一行上的div相同。如果他们能够做出回应，我对桌子完全开放。

由于某些用户使用其移动设备输入数据，因此需要响应。如果没有它我必须绝对应得，我可以。

我感兴趣的代码

metricsview.css

.cols {
    height: 100%;
}

.row {
    overflow: hidden;
}

.question-wrap {
    background-color: #EEEEEE;
    margin-bottom: 10px;
    padding: 3px;
    border-radius: 4px;
} 

.input-wrap {
    margin-bottom: 10px;
}

input {
    display: block;
    margin-left: auto;
    margin-right: auto;
} 

view.jade（跳转到评论）

.container
    h2 Metrics for #{proposal.ProposalTitle}
    a(href='/proposals/#{proposal.id}') Return to proposal
    .row
        each val, index in questions.general
            - var n = 1
            - var count = 0;
            - for (i in questions.general[index]) {
            -   count++;
            - }
            while n < count //DIVS START BELOW THIS LINE
                .col-lg-2.col-md-3.col-sm-6.col-xs-12.cols
                    .question-wrap
                        .question #{val[n]}
                            .input-wrap
                                input(type='text' size='3')
                - n++