Zurb基金会小柱不流动

我正在与Zurb基金会4.3合作，并且无法绕过Zurb的小型和大型柱类课题。在下面的代码示例中，仅使用列的大类时，第二列将在UI宽度更改时重新定位到第一列的下方。这是不错的，因为它使UI内容清洁Zurb基金会小柱不流动

 <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>

我希望能够改变内容的列宽为整个页面宽度变化的能力。但是，当我将页面从广泛拖到缩小时，如果我使用小类，则内容不会重新定位。我错过了什么？谢谢。

来源

2013-08-16 Tom Schreck

这些小类在小屏幕上控制列的宽度，而不指定小类，在小屏幕上列默认为小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-17 01:28:05 Nicholas

感谢您的回复。我尝试添加推/拉类，它交换了divs的顺序。我只需要在左侧有yadda yadda列并且右侧有气泡，除非页面的宽度到达将点推到yadda yadda下面的点。我喜欢通过在第一列下推动secnd列来处理它的方式，但是当添加small-xx类时，此功能会消失。小改变了经验，所以我显然不理解这是如何工作的。当它改变列的顺序时，我看不到推/拉的需要。 –

如果你在yadda yadda的顶部/左侧和右侧/底部的气泡都不错，我们不需要像你所说的推/拉。如果你想让小屏幕视图具有完整的宽度，我们甚至不需要小类。如果您希望小屏幕视图具有指定的宽度，这就是小类进来的地方。只要它们总和大于12（对于12个col网格），它将溢出到下一行。所以这就是为什么当你使用small-8 small-4时它仍然在同一排。如果您使用小12小4 yadda yadda将具有全宽，而气泡半宽度以下但右对齐（最后一个孩子）。 – Nicholas

我很好奇，你的帖子中的例子1是不是你想要的？ – Nicholas

Zurb基金会小柱不流动

回答

相关问题