グリッド幅に合わせて列を取得できません

Question

私はセマンティックUIを使用しており、グリッドを適切に設定できません。ドキュメントによると、セマンティックUIは16列を使用しています。左側にthreeの幅の列があり、その横にthirteenの幅の列があります。これは、（PICが切り取られる）、それがどのように見えるかです：私は長い間、ブートストラップを使用し、今セマンティックUIを使用しようとしている

。私は何が欠けていますか？ Demo

<header> 
    <div class="mobile hidden"> 
     <div class="ui container"> 
      <div class="ui grid"> 
       <div class="eight column"> 
        <div class="ui secondary menu"> 
         <a class="active item"> 
          Home 
         </a> 
         <a class="item"> 
          Messages 
         </a> 
         <a class="item"> 
          Friends 
         </a> 
         <div class="right menu"> 
          <div class="item"> 
           <div class="ui icon input"> 
            <input type="text" placeholder="Search..."> 
            <i class="search link icon"></i> 
           </div> 
          </div> 
          <a class="ui item"> 
           Logout 
          </a> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</header> 
<div class="clearing"></div> 
<div class="ui container"> 
    <div class="mobile hidden"> 
     <div class="ui grid row"> 
      <aside class="three column red"> 

      </aside> 
      <section class="thirteen column olive"> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab doloremque illum quas? Dolore dolorem dolorum ipsum? Commodi error excepturi laboriosam magnam nobis odio suscipit unde! Alias atque dicta reiciendis sapiente! 
      </section> 
     </div> 
    </div> 
</div> 

Answer 1

あなたHTML要素に二つの追加のクラスwideとfieldが欠落しています。以下のように変更してください

<aside class="three wide field column red"></aside> 
<section class="thirteen wide field column olive"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab doloremque illum quas? Dolore dolorem dolorum ipsum? Commodi error excepturi laboriosam magnam nobis odio suscipit unde! Alias atque dicta reiciendis sapiente! 
</section>