html - Semantic-UI:为什么 Body 的视口(viewport)大小不一样？

Question

请看我的Hello World-esque application , 使用 Semantic-UI 构建。

我经常使用 Semantic-UI，比起 Bootstrap，我更喜欢它，但我注意到边缘处存在这个一致的问题。视口(viewport)有某种多余的边距，请注意网页底部(空白区域)和网页右侧(更多空白区域)。

我一直在尝试将 html/body 的 width/height 设置为 100%，但没有成功。

这是一个语义 UI 问题，还是其他一般问题？有任何更正此 CSS 的建议吗？

Answer 1

这是因为 ui grid 属性会由于负边距而将内容拉出其区域。尝试将其设置为 0。

.ui.grid {
  margin: -1rem; // Change to 0
}

最佳做法是将 ui 网格包裹在容器中。我不确定为什么 .container CSS 代码在您的站点中丢失，但他们在文档中有。

Semantic UI Docs网格包裹在具有宽度设置的 .main.container 中。