Question

我正在使用semantic-ui，并在标签片段中进行如下网格设置：

<div class="ui bottom attached tab segment" data-tab="Overall Stats">

<div class="ui internally celled stackable grid">
  <div class="row">
    <div class="eight wide column">
      <h4 class="ui blue header">Top Goal Scorers
        <div class="sub header">(All Age Groups)</div>
      </h4>
      <div id="showOverallGB"></div>
    </div>


    <div class="eight wide column">
      <h4 class="ui blue header">Most MoM Awards
        <div class="sub header">(All Age Groups)</div>
      </h4>
      <div id="showOverallMoM"></div>
    </div>

  </div>
</div>

在showOverall* div中，我添加了动态创建的表。我遇到的问题是创建的表可能比它们所在的列宽，这意味着左手表与右手表重叠（当在非移动设备上查看时，网格不会堆叠）。如果动态添加的表比它们所在的列宽，是否有办法调用网格的stackable部分？

编辑：这是一个小提琴 - https://jsfiddle.net/eynnqLkk/1/ 您需要转到Age Group Stats标签，然后使用jsfiddle边界。你应该看到类似的东西：

Answer 1

您可以向表格添加滚动条，以便它们不会重叠添加：

#showGB, #showMoM {width:100%; overflow:auto;}

正如您在此处所见： Fiddle

或者如果你想在没有房间的情况下移动另一个房间，可以移除50％的容器宽度：

.ui.grid > .row > [class*="eight wide"].column {width:auto !Important}

正如您在此处所见： Fiddle

媒体查询 - 将CSS更改为动态内容宽度更改

1 个答案: