Semantic-UI：为什么 Body 的视口大小不一样？

Question

请看看我的 Hello World-esque application，它是用 Semantic-UI 构建的。

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

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

这是语义问题-UI 还是其他一般问题？有任何纠正此问题的建议吗？CSS?

Answer 1

如果你设置

 .ui.grid {margin:0}

它会起作用

Answer 2

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

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

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

Semantic UI Docs 网格包裹在 .main.container 内，其中设置了宽度。

Answer 3

问题出现在 "ui grid" 的默认边距 bcz。要修复它，只需将 "padded" class 添加到 "ui grid" 元素。就像这样：

<div class="ui grid padded">
  <!-- your columns -->
</div>

Answer 4

正如 Manoj 所暗示的，根据 docs 主网格的解决方案是

<div class="ui grid container">
  <div class="four wide column">
    <!-- ... -->
  </div>
  <!-- ... -->
</div>

Semantic-UI: Why is the Body not the same viewport size?