我有一个场景,表格是动态呈现的。使用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,但我希望有一个更简单的解决方案来解决这个问题。谢谢。