使用bootstrap创建一个深度嵌套的表单以获得响应

Question

我有一个场景，表格是动态呈现的。使用ul列表可以使用任意数量的级别深深嵌套表单。

<ul>
    <li>LABEL + INPUT</li>
    <li>LABEL + INPUT</li>
    <li>
       <ul>
          <li>LABEL + INPUT</li>
          <li>LABEL + INPUT</li>
       </ul>
       .....
    </li>
</ul>

我正在使用引导网格来对齐标签和输入。如果我们为所有标签指定col-sm-2的宽度，则嵌套级别越深，它必须使用的12网格宽度越小。例如，嵌套级别3的col-sm-2小于嵌套级别1的col-sm-2。这是因为bootstrap基于视口宽度计算宽度，而不是元素的宽度＆＃ 39;父母。

以下是我正在尝试做的演示：https://jsfiddle.net/s85g/jgr3uz6e/10/

如您所见，级别越深，标签宽度越小。在某些时候标签会溢出。当标签没有足够的空间时，我需要找到一种堆叠列的方法。我希望标签在任何级别都是可读的，同时保持响应式布局。

我试图避免为css中的标签指定静态宽度。

我读到了关于元素查询和JS + CSS中可用的一些hack，但我希望有一个更简单的解决方案来解决这个问题。谢谢。