如何将semantic-ui默认16列计数更改为24

Question

我试图把“@columnCount：24;”在src / site / globals / site.variables中执行“gulp build”但事实证明没有任何改变。

另一个疑问是，即使这样可行，我可以为我的页面元素使用类似“二十宽列”的内容吗？

Answer 1

直接来自Semantic UI网站：

  

所有网格系统都使用任意列数。语义的默认主题假定为16列。您可以通过调整@columnCount中的site.variables值来调整项目中的数字。

Answer 2

@columnCount变量最多只能达到16。

由于Semantic-UI是使用16列默认构建的，因此所有其他相关变量和计算都基于此。为了超过16列，您必须找到合适的位置并添加必要的变量，计算和类，以使其工作。

然而，我认为你可以通过几种更简单的方式来完成你正在寻找的东西。

首先，您可以通过更改相应元素的边距和填充，或者可能使用“宽松”或“非常放松”的类来完成您要查找的内容，而不是添加更多列。 / p>

但是如果您绝对需要那么多列，那么请尝试使用nested grids。

或许这样的事情：

<div class="ui two column grid">
  <div class="column">
    <div class="ui ten column grid">
    </div>
  </div>
  <div class="column">
    <div class="ui ten column grid">
    </div>
  </div>
</div>