为什么仅使用 Semantic UI 的网格模块时我的列太宽了？

Question

我想在我的项目中使用语义 UI 并且我已经开始使用网格系统。目前我只使用 pre-built grid module from GitHub.

以下 HTML 未按预期工作：

<div class="ui page grid">
  <div class="four wide column red">four</div>
  <div class="four wide column green">four</div>
  <div class="four wide column blue">four</div>
  <div class="four wide column yellow">four</div>
  <div class="sixteen wide column teal">sixteen</div>
</div>

这是我得到的结果：

列明显太宽了，4列"four wide"放不下，16列宽导致出现滚动条。

这些列 div 似乎应该是框大小的，但实际上不是。它们的内容宽度加起来正好等于页面的宽度，但是它们也有 1rem 的填充，我相信这是额外宽度的来源。

是否有我需要包含的通用语义 UI css 模块来添加一些基本样式？我目前只包括来自上述 GitHub 存储库的 grid.css。

没有包含其他样式表，容器 HTML 页面为空白。

jsfiddle link

Answer 1

您的问题是您只包含 grid.css 样式表。您仍然需要 semantic.css 样式表才能使网格正常工作。

这是更新后的 fiddle link，我只添加了 semantic.min.css 资源，解决了问题。

http://jsfiddle.net/DrkStrife/j8okweLv/1/

编辑：

看起来语义确实包含了一切。我检查了该项目，他们正在使用自定义的 reset.css 我已经更新了 fiddle 并且仍在工作。

http://jsfiddle.net/DrkStrife/j8okweLv/2/