首页 文章

Zurb基金会小柱不流动

提问于
浏览 次
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>

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

responsive-design zurb-foundation

1 回答

  • 3

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

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

    回复于

相关问题