Create a deeply nested form using bootstrap for responsiveness -

i have scenario forms dynamically rendered. form nested number of levels using ul list.

<ul>     <li>label + input</li>     <li>label + input</li>     <li>        <ul>           <li>label + input</li>           <li>label + input</li>        </ul>        .....     </li> </ul> 

i using bootstrap grid align labels , inputs. if specify width of col-sm-2 labels, deeper nest level smaller 12-grid width has work with. instance, col-sm-2 @ nest-level 3 smaller col-sm-2 @ nest-level 1. because bootstrap bases it's width calculation on viewport width, not width of element's parent.

here demo of trying do: https://jsfiddle.net/s85g/jgr3uz6e/10/

as can see, deeper level smaller label width. @ point label overflow. need find way stack columns when there isn't enough room label. want label readable @ level, while @ same time maintaining responsive layout.

i trying avoid specifying static width labels in css.

i read element queries , of hacks available in js + css, hoping there simpler solution problem. thanks.