Question

我试图在Semantic UI中创建一个4列网格（默认为16列），因此每列的宽度为4.但是，由于网格不起作用，我觉得完全丢失了正确！这是我的计算机上的样子（使用Firefox和Chromium进行测试，结果相同）：

<div class="ui grid">
    <div class="four wide column"></div>
    <div class="four wide column"></div>
    <div class="four wide column"></div>
    <div class="four wide column"></div>
    <div class="four wide column"></div>
    <div class="four wide column"></div>
    <div class="four wide column"></div>
    <div class="four wide column"></div>
</div>

Grid

使用相同的代码，它在JS Fiddle上正确显示： https://jsfiddle.net/fnL73zL0/

工作示例：

＆＃13;

* {
  border: 1px solid black;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.css" rel="stylesheet" />
<div class="ui grid">
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
</div>

＆＃13;

出了什么问题？我记得我和Bootstrap有类似的问题。问题非常严重，因为如果没有工作网格，我就无法建立任何严肃的网站。

网格系统在语义UI中无法工作（无法正确对齐）

0 个答案: