Kılavuz genişliğine uygun sütunlar alınamıyor

Question

Semantic UI kullanıyorum ve ızgaraları düzgün ayarlayamıyorum. Dokümanlara göre Semantic UI, 16 sütun kullanır ve sol tarafta three genişliğinde ve thirteen genişliğindeki bir sütunun yanında bir sütuna sahip olmaya çalışıyorum. Bu (PIC kırpılır) nasıl görünüyor: Ben uzun zamandır Bootstrap kullandı ve şimdi Semantik UI kullanmaya çalışıyor olması

. Neyi kaçırıyorum? 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

Eğer HTML eleman iki ek derslere wide ve field eksik.

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