2

我正在使用 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>

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

4

1 回答 1

3

小类控制小屏幕上列的宽度,无需指定小类,列在小屏幕上默认为 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>

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

于 2013-08-17T01:28:05.830 回答