Come abilitare lo scorrimento in eccesso all'interno di una griglia di UI Semantic?

Question

Non ho abbastanza rep per pubblicare immagini, ma ecco un link.

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

Ho problemi cercando di capire il corretto CSS/MENO per consentire sidescrolling qui all'interno del framework di interfaccia utente semantico. Ci sono quattro colonne in questa parte della griglia, e ho bisogno di aggiungerne altre quattro, ma tenerle nascoste a destra fino a quando non vengono fatte scorrere, se questo ha senso.

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

Come aggiungerei più colonne qui senza che vengano spostate nella riga successiva?

Answer 1

Griglie elementi del Semantic UI ottenuto display: inline-block, in modo da poter impostare white-space:nowrap per impedire che gli elementi avvolgono consecutive:

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