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>

如果这不是您希望实现的目标，我会帮助您指定其他解决方案