Question

我正在尝试在computer和tablet尺寸之间设置两个等宽列堆叠。我是用语义反应来做这个的，但这是我到目前为止在渲染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组件的大小定义。

你是正确的，可堆叠专门针对移动设备，所以如果你想要不同的行为，你也应该从你的网格组件中删除它。

由于您要执行的操作，将大小调整定义专门移动到Grid.Column组件可能更有意义。你可以从技术上实现相同的可堆叠＆＃34;通过将移动列宽度定义为16来实现行为。在Grid.Column级别定义大小调整可以让您获得最大的控制权。

基本上，如果您现在在Grid.Column组件上定义的内容明确定义了您想要的内容，请删除＆＃34; stackable＆＃34;和＆＃34;列＆＃34; Grid组件中的props应该可以为您提供所需的内容，因为您可以在更精确的Grid.Column级别控制宽度。

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

1 个答案: