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>

Answer 2

自2017年7月3日起，提供了“滚动内容”样式。请参见https://github.com/Semantic-Org/Semantic-UI/issues/4335

中的结束语

这将使整个网格内容在溢出时滚动。对我来说，这是垂直滚动的，因为我在单行列中的内容太多了。

<div class="ui grid scrolling content">

模式示例：

<div class="ui modal">
  <div class="header">Header</div>
  <div class="scrolling content">
    <p>Very long content goes here</p>
  </div>
</div>

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

2 个答案: