如何在语义Ui网格中启用溢出滚动? [英] How to enable overflow scrolling within a Semantic Ui Grid?
问题描述
我没有足够的代表来发表图片,但这是一个链接.
I don't have enough rep to post images, but here's a link.
http://i.stack.imgur.com/eTp8Q.png
我在尝试找出合适的CSS/LESS以便在语义UI框架中进行侧滚动时遇到了麻烦.网格的这一部分有四列,我需要再添加四列,但是如果有意义的话,请将它们隐藏在右边,直到将它们滚动到为止.
I'm having trouble trying to figure out the proper CSS/LESS to enable sidescrolling here within the Semantic UI framework. There are four columns in this part of the grid, and I need to add four more, but have them hidden off to the right until they are scrolled to, if that makes sense.
<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>
我如何在此处添加更多列而不将它们转到下一行?
How would I add more columns here without them going to the next row?
推荐答案
语义UI的网格元素为display: inline-block
,因此您可以设置white-space:nowrap
以防止该元素排成一行:
Grids elements of Semantic UI got display: inline-block
, so you can set white-space:nowrap
to prevent that elements wrap in a row:
<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>
这篇关于如何在语义Ui网格中启用溢出滚动?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!