responsive-design - Zurb Foundation 小柱不流动

Question

我正在使用 Zurb Foundation 4.3，但在处理 Zurb 的小型和大型列类时遇到了麻烦。在下面的代码示例中，仅使用大类作为列，当 UI 宽度更改时，第二列将重新定位在第一列下方。这很好，因为它使 UI 内容保持干净

        <div class="row">
        <div class="large-8 columns rounded">
            Bubbles
        </div>
        <div class="large-4 columns rounded">
            Yadda Yadda Yadda
        </div>
    </div>

但是，如果我向列添加小类，第二列不会重新定位，从而导致 UI 困惑。

        <div class="row">
        <div class="small-4 large-8 columns rounded">
            Bubbles
        </div>
        <div class="small-8 large-4 columns rounded">
            Yadda Yadda Yadda
        </div>
    </div>

我喜欢能够在整个页面更改宽度时更改内容列宽的能力。但是，当我将页面从宽拖到窄时，如果我使用小类，内容不会重新定位。我错过了什么？谢谢。

Answer 1

小类控制小屏幕上列的宽度，无需指定小类，小屏幕上的列默认为 small-12 或 100% 宽度，这就是您看到它们垂直堆叠的原因。

在您的第二个示例中，小屏幕的第一列与第二列的比率将为 1:2，而不是中等屏幕的 2:1。列以相同的顺序彼此相邻放置，但它们的大小交换。
这应该是你所看到的。

如果您希望它们像第一个示例一样垂直堆叠但交换列的顺序，请使用

<div class="row">
    <div class="large-4 push-8 columns rounded">
        Yadda Yadda Yadda
    </div>
    <div class="large-8 pull-4 columns rounded">
        Bubbles
    </div>
</div>

如果这不是您希望实现的目标，我将帮助您指定另一个解决方案