使用LESS CSS计算宽度为百分比减去边距

Question

我在CMS应用程序中使用Twitter Bootstrap网格系统。

当用户构建页面时，他们可以在一行中添加任意数量的列。考虑这一行：

<div class="span9 row">
    <div class="span5">span5</div>
    <div class="span4">span4</div>
</div>

我想要做的是添加一项功能，用户可以在其中设置一行，以便在其中的列之间平均分配其宽度。

因此将覆盖span5和span4类。这基本上就像表行一样，但我认为制作行display: table-row很麻烦，它可能会破坏TwBootstrap网格的响应特性。

我想避免的是，将每个宽度组合定义为：

<div class="span9 row shared child-count-2">
    <div class="span5">span5</div>
    <div class="span4">span4</div>
</div>

在CSS中：

.row.span9.shared.child-count-2 > div {
    width: 340px;
}

由于我已经在使用LESS for CSS，我认为可能有一个方便的计算可以使这个工作。

问题是指定50％的宽度不会考虑20px的{​​{1}}。所以我需要取每行的宽度减去20px。然后将剩余宽度除以列数。

另外，我想避免使用JavaScript。我不喜欢渲染99％的视图，然后在脚本中进行调整。如果脚本执行稍有延迟，用户将看到布局闪烁。不好。

那么，有没有办法从LESS / CSS做到这一点？

Answer 1

你可以使用LESS来实现。使用LESS，您可以使用JavaScript表达式的评估将它们包装成后面的标记：

@var: `"hello".toUpperCase() + '!'`;

因此，您还可以使用document.getElementById('myId').width之类的内容来获取元素的宽度等等。点击此处lesscss.org并转到“JavaScript评估”部分。

如果您需要更多帮助，请询问！ ：）