如何在语义 Ui 网格中启用溢出滚动？

Question

我没有足够的 post 图片，但这里有 link。

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

我在尝试找出正确的 CSS/LESS 以在语义 UI 框架内启用横向滚动时遇到问题。网格的这一部分有四列，我需要再添加四列，但如果可以的话，将它们隐藏在右侧，直到滚动到它们为止。

<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

Semantic 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 日起，提供 "scrolling content" 样式。请参阅 https://github.com/Semantic-Org/Semantic-UI/issues/4335

中的结束语

这会使整个网格内容在溢出时滚动。对我来说，这是垂直滚动的，因为我在 single-row 列中有太多内容。

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

如何在语义 Ui 网格中启用溢出滚动？

How to enable overflow scrolling within a Semantic Ui Grid?

css

less

semantic-ui