1

是否可以更改 variables.less 中的流体网格计算以使网格是流体的,但排水沟的宽度是固定的?

我查看了计算,但不确定如何从每个流体跨度中删除 30px 的宽度。

任何指向正确方向的指针都将不胜感激。

干杯

4

2 回答 2

2

检查您的_variables.less文件 - 在文件的底部,您应该能够编辑您要查找的内容。

尝试这两个链接,以了解计算:

自举流体行宽

http://coding.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/

希望这个对你有帮助。

编辑:

这可能会有所帮助:

http://en.wikipedia.org/wiki/Cross-multiplication

假设您使用的宽度为 940 像素,总装订线为 30 像素。计算 30px 的 940px 是......

940 to 100% equals 30 to x%->x = 3.191489361702128那是你的阴沟。

如果您使用 12 列,则您有 11 个排水沟,它们使用 330 像素的空间,为您的列留下 610 像素。所以每个 col 应该是610px / 12-> 50,8...px。再次进行计算:

940 to 100% equals 50,8 to x%->x = 6.170212765957447对于每一列。

当然,对其他两个(或更多)视口执行相同的操作。

希望我是对的...

计算示例:

(940px / 100) = (30px / x) // multiply with x->

((940px * x) / 100) = (30px) // multiply with 100->

(940px * x) = (3000px) // devide with 940px->

x = (3000px / 940px) // cutting the px

x = 3.191489361702128

注意在你的变量中使用点.而不是逗号。,

于 2012-10-23T09:43:05.870 回答
0

另一种解决方案是:向您的元素添加一个额外的类,例如.my-xtra-margin { margin-left: 30px; }(确保在引导定义之后包含它)或直接作为样式定义添加到您的标签中。

但是,我认为这总是会弄乱您的布局,因为列需要一定百分比的可用宽度,并且您可以使用固定的装订线too much

于 2012-10-31T08:33:28.310 回答