Question

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

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

我一直在尝试将width/height html/body设置为100%，但无济于事。

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

Answer 1

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

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

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

Semantic UI Docs网格包含在.main.container中，其宽度设置为。

Answer 2

问题出现“ui grid”默认边距的bcz。要修复它，只需在“ui grid”元素中添加“padded”类。就像这样：

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

Answer 3

如果你设置

 .ui.grid {margin:0}

它会起作用

Answer 4

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

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