Семантический интерфейс не отображается Текст

Question

У меня есть довольно простой эшафот, но по какой-то причине ни один из моих текстов в тегах <p> не отображается. Может кто-нибудь объяснить, почему? https://jsfiddle.net/h769p2wt/2/

Я предполагаю, что проблема связана с некоторым отсутствующим классом в моей структуре. Есть ли руководство по настройке веб-сайта, чтобы «быть готовым» для Semantic-UI? Я должен использовать класс ui здесь? Любая помощь с этим была бы огромной !!

<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>