Twitter bootstrap 使用引导创建深度嵌套的表单，以实现响应

我有一个场景，表单是动态呈现的。该表单可以使用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的宽度计算基于视口宽度，而不是元素父元素的宽度

下面是我正在尝试做的演示：

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

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

---

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

您应该发布一个布局的实际示例。请看。@vanburen我已经用jsfiddle更新了帖子，谢谢。在每一个“嵌套”中，每个部分的总宽度是否会不同，即12个网格？是否每次嵌套字段时都必须更小？@mohammedkhan我不确定我是否理解您的建议。由于嵌套级别的数量是任意的，我不知道有什么方法可以覆盖每个级别的引导宽度渲染。