基金会5如何使小屏幕

Question

一列我使用zurb-foundation以下网格：

<div class="row"> 
<div class="small-6 large-3 columns">&nbsp;</div> 
<div class="small-6 large-9 columns">&nbsp;</div> 
</div> 

以上电网，使两列的布局。但是，我想知道在小屏幕上将上述布局设置为一列布局而不是六列两列。换句话说，我希望该行的第二个div用作小屏幕的新行。

Answer 1

应该是一个简单的解决办法：

.columns { 
    width:100%; 
} 

You can see it here

Answer 2

像这样的东西应该工作：

<div class="row"> 
    <div class="medium-6 large-3 columns"> 
     <div class="small-6 medium-12 large-12 columns">column 1</div> 
    </div> 
    <div class="medium-6 large-9 columns"> 
     <div class="small-6 medium-12 large-12 columns">column 2</div> 
    </div> 
</div> 

http://jsfiddle.net/6tMZH/

Answer 3

使用下面的HTML中你可以有偏移和有在移动screen.and居中的div在大屏幕上分别为大3和大9。

<div class="row"> 
    <div class="small-6 small-offset-3 large-3 large-offset-0 columns ">..</div> 
    <div class="new small-6 small-offset-3 large-9 large-offset-0 columns">..</div> 
</div> 

在基础CSS列最后一个孩子是浮动right.so我们把它改为左浮动同时拥有其他

.new{ 
float:left; 
} 

Answer 4

后堆积起来的股利假设你使用的是标准的12列电网并没有修改的，只是做了小的12：

<div class="row"> 
<div class="small-12 large-3 columns">&nbsp;</div> 
<div class="small-12 large-9 columns">&nbsp;</div> 
</div> 

只知道小过滤器它是一路上涨......因此，在这个例子中“中等”也将是12.如果要介质看起来像l ARGE，那么这样做：

<div class="row"> 
<div class="small-12 medium-3 columns">&nbsp;</div> 
<div class="small-12 medium-9 columns">&nbsp;</div> 
</div> 

注意如何为介质过滤了一切它上面不需要大的在上面的例子。