css - 如何响应地在非移动断点行内堆叠语义 ui 网格列

Question

我正在尝试在 computer 和 tablet 大小之间设置两个等宽的列堆栈。我在 semantic-ui-react 中这样做，但这是我目前在呈现的 HTML 中所做的:

<div class="ui stackable two column grid">
  <div class="row">
    <div class="eight wide computer sixteen wide mobile sixteen wide tablet column">
      <div class="ui segment">
        <img src="https://react.semantic-ui.com/assets/images/wireframe/paragraph.png" class="ui image" />
      </div>
    </div>
    <div class="eight wide computer sixteen wide mobile sixteen wide tablet column">
      <div class="ui segment">
        <img src="https://react.semantic-ui.com/assets/images/wireframe/paragraph.png" class="ui image" />
      </div>
    </div>
  </div>
</div>

( jsfiddle )

我遇到的问题是 tablet 尺寸没有垂直装订线，但 mobile 尺寸有一个。

我假设我不应该使用 stackable 属性，因为它被硬编码为仅影响 mobile 大小。我应该怎么做？

Answer 1

您正在混合列大小定义。所以第一件事是我会删除您的 Grid 组件上的大小定义。

stackable 专门针对移动设备是正确的，因此如果您想要不同的行为，您也应该从 Grid 组件中删除它。

由于您正在尝试做的事情，将大小调整定义专门向下移动到您的 Grid.Column 组件可能更有意义。您只需将移动列宽定义为 16，就可以在技术上实现相同的“可堆叠”行为。在 Grid.Column 级别定义大小可让您拥有最大的控制权。

基本上，如果您现在在 Grid.Column 组件上定义的是明确定义您想要的，那么从您的 Grid 组件中删除“可堆叠”和“列” Prop 应该会给您想要的，因为您控制的宽度为更精确的 Grid.Column 级别。