苏西·欧米茄在正确获取列宽时遇到问题

Question

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

当我使用 span-columns（3， 12） 时，我希望最大大小的总宽度为 300px，每个内容之间有 20px 的填充。我试图用数学方法计算它来设置每列的宽度，但它没有按预期工作。

我的一些代码是：

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

使用 （3， 12） 我的内容块的宽度为 295px。如何让它达到 300 像素？

Answer 1

如果要

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

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

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

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

或。。。

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

等。您当前设置的唯一问题是您用自己的$container-width覆盖了列出数学。