Aligning an Unknown Number of Unknown Lengthed Elements in Bootstrap

Question

I'm trying to build a table-like page for inputting metrics. Users of my site will view a proposal for money expenditure, then fill out multiple inputs on a separate page. The inputs correspond to questions about the proposal.

The questions themselves can be quite lengthy, and each proposal might have different questions that I load in from a configuration file. This means that I don't know and can't hard code how many questions or how long the questions may be.

So I need this to be a table that can wrap itself down and around if necessary due to the length of the questions. This is where Bootstrap comes in. I originally tried to bootstrap a whole table, but the result was really long and squished. I then tried to get each question and input into its own seperate div, and put all those in a row. However, the result looks silly on certain resoloutions.

I tried my best to get each line of questions to be the same height after reading How can I make Bootstrap columns all the same height? , but the first option which is the only that maintains responsiveness doesn't work properly.

A completely awesome answer would be anyone who could tell me how to maintain even rows across the multiple divs, where each div is the same height of at least the ones on the same line. I'm totally open to tables, if they can be responsive.

Responsiveness is necessary due to some users using their mobile devices to input data. If I must absolutely due without it, I could.

My code for those interested

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 (jump to comment)

.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++ 

Answer 1

Its surprisingly difficult to have items in a row match height, especially in a responsive situations where the number of items in the row vary... that is until flexbox came around. It is more recent so you don't have full browser support, especially in IE, but you could backup to a javascript solution if that is critical.

Add the following to your css (ideally wrapping in another selector to not globally apply these rules):

.row { display:flex; flex-wrap:wrap; } 
.cols { display:flex; height:auto; }

I tried the above on your linked site with success.

Browser Support