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

上面的网格构成了两列的布局。但是，我想知道在小屏幕中，如何使上面的布局成为一列布局，而不是两列6的布局。换句话说，我希望该行的第二个div作为小屏幕的新行。

Answer 1

假设您使用的是标准的12柱网轴线，并且没有对其进行修改，则只需将小柱网轴线设置为12：

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

只需要知道那些小的过滤器它已经上升了..。因此，在本例中，" medium“也是12。如果您希望medium看起来很大，则执行以下操作：

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

注意在上面的例子中你是如何不需要大号的，因为中号会过滤掉上面的所有东西。

Answer 2

使用下面的超文本标记语言，你可以在移动设备上有偏移量和中心度，在较大的屏幕上分别有screen.and -3和large-9的div。

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

在foundation css列中，最后一个子级是浮动的right.so，我们将其更改为向左浮动，以使两个div在另一个之后堆叠

.new{
float:left;
}

Answer 3

像这样的东西应该是有效的：

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