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

Question

我想在我的项目中使用Semantic 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>

这是我得到的结果：

列显然太宽，四个＆＃34;四个宽＆＃34;列不合适，十六个宽列导致滚动条出现。

似乎这些列div应该是盒子大小的，但它们不是。它们的内容宽度与页面的宽度完全相加，但它们也有1rem填充，我认为这是额外宽度的来源。

是否有一个常见的语义UI css模块，我需要添加一些基本样式？我目前只在上面的GitHub存储库中包含grid.css。

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

jsfiddle link

Answer 1

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

这是更新的小提琴链接，我只添加了semantic.min.css资源，解决了问题。

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

修改

看起来语义确实包含了所有内容。我检查了项目，他们正在使用自定义的reset.css我已经更新了小提琴并且仍在使用。

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