如何在Semantic Ui Grid中启用溢出滚动？

Question

我没有足够的代表发布图片,但这里是一个链接.

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

我在查找适当的CSS/LESS以在Semantic UI框架内启用sidecrolling时遇到了麻烦.网格的这一部分有四列,我需要再添加四列,但是如果有意义的话,将它们隐藏到右边直到滚动到它们.

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

如果没有它们进入下一行,我将如何添加更多列？

Answer 1

获得了语义UI的网格元素display: inline-block,因此您可以设置white-space:nowrap为防止元素换行:

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