Semantik UI Kılavuzunda taşma kaydırması nasıl etkinleştirilir?

Question

Resim yayınlamak için yeterli temsilcim yok, ancak burada bir bağlantı var.

http://i.stack.imgur.com/eTp8Q.png

Ben Semantik UI çerçevesinde burada Sidescrolling etkinleştirmek için uygun CSS/AZ anlamaya çalışıyorum sorun yaşıyorum. Kılavuzun bu bölümünde dört sütun var ve dört tane daha eklemem gerekiyor, ancak kaydırılana kadar sağa gizlenmişler.

<div class="features ui grid noMargin"> 
    <div class="four wide column greyOdd">Stuff here</div> 
    <div class="four wide column greyEven">More stuff</div> 
    <div class="four wide column greyOdd">Calls n stuff</div> 
    <div class="four wide column greyEven">Testing look</div> 
</div> 

Bir sonraki satıra gitmeden burada nasıl daha fazla sütun eklerim?

Answer 1

Izgaralar Semantik UI öğeleri display: inline-block var, bu yüzden elemanları arka arkaya sarmak bunu önlemek için white-space:nowrap ayarlayabilirsiniz:

<div class="features ui grid noMargin" style="overflow-y:auto;white-space:nowrap;"> 
    <div class="four wide column greyOdd">Stuff here</div> 
    <div class="four wide column greyEven">More stuff</div> 
    <div class="four wide column greyOdd">Calls n stuff</div> 
    <div class="four wide column greyEven">Testing look</div> 
    <div class="four wide column greyOdd">Stuff here</div> 
    <div class="four wide column greyEven">More stuff</div> 
    <div class="four wide column greyOdd">Calls n stuff</div> 
    <div class="four wide column greyEven">Testing look</div> 
</div>