1

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

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

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

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

所以span5andspan4类将被覆盖。这本质上就像一个表格行，但我认为制作该行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;
}

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

问题是指定 50% 宽度没有考虑20px到margin-left. 所以我需要取行的宽度，每列减去 20px。然后将剩余的宽度除以列数。

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

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

4

1 回答 1

0

您可以使用 LESS 来实现。使用 LESS，您可以使用 JavaScript 表达式的求值，将它们包装成反引号：

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

因此，您还可以使用诸如document.getElementById('myId').width获取元素的宽度之类的方法。查看lesscss.org并转到“JavaScript 评估”部分。

如果您需要更多帮助，尽管问！:)

于 2012-06-04T10:54:54.360 回答