2

尝试在 4 个不同的断点上获得正确的列宽以根据需要设置时遇到问题。

当我使用 span-columns(3, 12) 时，我希望最大尺寸的总宽度为 300 像素，每个内容之间有 20 像素的填充。我试图用数学方法来设置每列的宽度，但它没有按预期工作。

我的一些代码是：

$total-columns: 12;
$column-width: 86.666667px;
$gutter-width: 20px;
$grid-padding: 20px;
$container-width: 1300px;
$container-syle: static;

使用 (3, 12) 我的内容块的宽度为 295px。我怎样才能让它总共300px？

4

1 回答 1

1

如果要根据列宽进行数学运算，则应删除$container-width覆盖。那么数学很简单：

3 * $column-width + 2 * $gutter-width = 300px

该方程式有许多可能的解决方案，具体取决于您想要的排水沟大小。显然你已经这样做了：

3 * 86.666666667px + 2 * 20 ~= 300px

或者...

3 * 90px + 2 * 15px = 300px

等等。您当前设置的唯一问题是您正在用自己的$container-width.

于 2013-10-25T15:36:22.303 回答