语义 UI 未呈现文本

Question

我已经有了一个非常基本的脚手架，但由于某种原因，<p> 标签中的 none 文本显示了。有人可以解释为什么吗？ https://jsfiddle.net/h769p2wt/2/

我猜问题是由于我的结构中缺少 class。是否有为 Semantic-UI 设置 "be ready" 网站的指南？我应该在这里使用 ui class 吗？对此的任何帮助都是巨大的！！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.js"></script>
<nav class="ui inverted fixed main menu">
    <a href="http://localhost:3000/" class="title brand item">StuffCo</a>
    <a href="http://localhost:3000/" class="active item">Home</a>
    <div class="right menu">
        <a href="http://localhost:3000/contact" class="item">Contact</a>
    </div>
</nav>
<main class="ui page grid">
    <div class="row">
        <div class="column center aligned starter">
            <div class="ui grid">
                <div class="row">
                    <h1>StuffCo</h1>
                    <blockquote>
                        <p>Delivering Stuff to your Things</p>
                    </blockquote>
                    <p>Impressive Leading Statement</p>
                    <h2 id="service-offerings">Some header</h2>
                    <ul>
                        <li>Why am I not visible?</li>
</ul></div></div></div></div></main>

Answer 1

看起来问题出在您的脚手架结构上。网格中必须有列（尽管行不是必需的；参见 grid spec）。

您在第二个网格中缺少一列：

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<nav class="ui inverted fixed main menu">
            <a href="http://localhost:3000/" class="title brand item">StuffCo</a>
            <a href="http://localhost:3000/" class="active item">Home</a>
            <div class="right menu">
                <a href="http://localhost:3000/contact" class="item">Contact</a>
            </div>
        </nav>
        <main class="ui page grid">
            <div class="row">
                <div class="column center aligned starter">
                    <div class="ui grid">
                        <div class="row">
<!-- THIS WAS THE MISSING LINE --><div class="column center aligned">
                            <h1>StuffCo</h1>
                            <blockquote>
                                <p>Delivering Stuff to your Things</p>
                            </blockquote>
                            <p>Impressive Leading Statement</p>
                            <h2 id="service-offerings">Some header</h2>
                            <ul>
                                <li>Just kidding, now I'm visible</li>
                            </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

语义 UI 未呈现文本

Semantic UI not rendering Text

html

css

jquery

grid-layout

semantic-ui