我正在尝试构建一个类似于表格的页面来输入指标。我网站的用户将查看有关资金支出的提案,然后在单独的页面上填写多个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++