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

时间:2016-02-06 06:06:48

标签: 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基于视口宽度计算宽度,而不是元素的宽度&# 39;父母。

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

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

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

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

0 个答案:

没有答案