在语义 UI 可堆叠网格中重新排序列

Posted 2023-03-06

【中文标题】在语义 UI 可堆叠网格中重新排序列

【英文标题】：Reordering columns in a semantic-ui stackable grid

【发布时间】：2015-06-17 12:48:47

【问题描述】：

我目前正在使用 Sementic-UI 框架响应功能，但在使用可堆叠网格时遇到了困难。具体来说，我试图复制经典的首页布局，其中大段落和图片以三分之一和三分之二的列布局，左右交替。

<div class="ui stackable grid">
    <div class="sixteen wide column">
        <h2>Full width header</h2>
    </div>
    <div class="six wide column">
        <img  />
    </div>
    <div class="ten wide column">
        <p>Right content</p>
    </div>
</div>

<div class="ui stackable grid">
    <div class="sixteen wide column">
        <h2>Full width header</h2>
    </div>
    <div class="ten wide column">
        <p>Left content</p>
    </div>
    <div class="six wide column">
        <img  />
    </div>
</div>

我对所有部分重复此模式，并每次交换两个并排的列。问题是，当网格堆叠时，我想将图像保持在内容之上。它适用于第一种情况，因为列的顺序已经正确，但对于第二个块显然失败，因为图像放在内容之后。

我想知道是否有一种简单的方法可以实现这一点，还是只能使用 javascript 来完成？我应该继续使用网格还是应该使用其他东西？如果我需要使用 javascript，检测网格布局更改的最佳方法是什么？

这是我第一次做响应式设计，欢迎参考。

【问题讨论】：

据我所知，语义 UI 不允许这样做（根据this issue，可能不会）。

你找到解决办法了吗？

【参考方案1】：

这可以使用网格元素的reversed 变体来实现。对于第二个网格，我建议以下内容：

<div class="ui stackable grid">
    <div class="row">
        <div class="sixteen wide column">
            <h2>Full width header</h2>
        </div>
    </div>
    <div class="computer reversed row">
        <div class="six wide column">
            <img  />
        </div>
        <div class="ten wide column">
            <p>Left content</p>
        </div>
    </div>
</div>

默认情况下将图像放在首位，并且仅在计算机屏幕尺寸上反转，可以最大限度地降低图像在最后出现列堆叠的风险。它留下了在列堆叠之前图像出现在左侧的屏幕尺寸的可能性，但这应该不是那么严重的问题。