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

小类控制小屏幕上列的宽度，而不指定小类，小屏幕上的列默认为小-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>

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

Zurb基金会小柱不流动

1 个答案: