问题
I have a Bootstrap layout but I need it to be responsive and not sure how to do this horizontally.
How can I make that layout using standard Bootstrap layout but also have it be responsive? I currently have it with the "labels" in one fluid row and the inputs in another fluid row but when it is "shrunk", the labels no longer fit with the inputs.
回答1:
Have you considered nesting by making a single .row-fluid with five .spans inside it and two more .row-fluids inside each span? This way there is only one top level row, and the labels/fields should stay together.
http://jsfiddle.net/hmartiro/D2RLR/1726/
回答2:
You have to break this in to two rows, and let the left row that has labels be something like
span2, span2, span2, span4, span2
and then second row will contain input typesin the same manner
span2, span2, span2, span4, span2
I know it will look odd, but it will be responsive. You have to go with the Idea that Labels will always remain as a heading and can't break in to their respective input types. But that's the give and take when you switch to responsive layouts.
来源：https://stackoverflow.com/questions/12305719/bootstrap-responsive-horizontal-layout