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

时间:2015-09-11 00:04:41

标签: html css twitter-bootstrap

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

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

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

enter image description here

在阅读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++ 

0 个答案:

没有答案