javascript - 媒体查询 - 随着动态内容宽度的变化而改变 CSS

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 部分？

编辑:这是一个 fiddle - 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